html - 下拉子菜单未按预期显示

Question

我正在尝试在 html 导航菜单中创建子菜单。菜单正在出现，但它显示在菜单列表中而不是右侧。我已经对问题进行了截图，如果有人可以帮助我调整我的代码，我将不胜感激。

您将从屏幕截图中看到，子菜单出现在主菜单中，而不是位于所选链接的右侧。

我已经尝试了很多选项，所以我需要向专家寻求帮助。 非常感谢

.menu {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  background: #0c323f;
  position: static;
}

.navigation {
  list-style: none;
  padding: 0;
  margin: 0;
  background: rgb(58, 58, 58);
  font-size: 16px;
}

.navigation li {
  float: left;
}

.navigation li:hover {
  background: #1a4655;
}

.navigation li:first-child {
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 0 0 5px;
}

.navigation li a {
  display: block;
  padding: 0 20px;
  text-decoration: none;
  line-height: 40px;
  color: #fff;
}

.navigation ul {
  display: none;
  position: absolute;
  list-style: none;
  margin-left: -3px;
  padding: 0;
  overflow: hidden;
}

.navigation ul li {
  float: none;
}

.navigation li:hover>ul {
  display: block;
  background: #1a4655;
  /*          border: solid 3px #fff;*/
  border-top: 0;
  -webkit-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;
  -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
  position: absolute;
}

.navigation li:hover>ul li:hover {
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}

.navigation li li a:hover {
  background: #0c323f;
  color: white;
}

.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}

<div class="menu">
  <ul class="navigation">
    <li><a href="/domain/admin/index.php" title="Home">Home</a></li>
    <li><a href="/domain/admin/test.php" title="Requests">Requests</a>
      <ul>
        <li><a href="" title="Boxes">Boxes</a>
          <ul>
            <li><a href="" title="Files">Files</a></li>
            <li><a href="" title="Recycle">Recycle</a></li>
            <li><a href="" title="Box Supply">Box Supply</a></li>
          </ul>
        </li>
        <li><a href="" title="Files">Files</a></li>
        <li><a href="" title="Recycle">Recycle</a></li>
        <li><a href="" title="Box Supply">Box Supply</a></li>
        <li><a href="" title="Recycle">Recycle</a></li>
        <li><a href="" title="Destruction">Destruction</a></li>
        <li><a href="" title="Destruction Schedules">Destruction Schedules</a></li>
      </ul>
    </li>
    <li><a href="" title="Reports">Reports</a></li>
    <li><a href="" title="Invoices">Invoices</a></li>
    <li><a href="/domain/admin/cp.php" title="Control Panel">Control Panel</a></li>
    <li><a href="/domain/admin/logout.php" title="Logout">Logout</a></li>

  </ul>
  <div class="clear"></div>
</div>

图片截图

普通下拉

子菜单显示问题

Answer 1

使用top:0和left:100%到二级子菜单

堆栈片段

.menu {
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  background: #0c323f;
  position: static;
}

.navigation {
  list-style: none;
  padding: 0;
  margin: 0;
  background: rgb(58, 58, 58);
  font-size: 16px;
}

.navigation li {
  float: left;
}

.navigation li:hover {
  background: #1a4655;
}

.navigation li:first-child {
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 0 0 5px;
}

.navigation li a {
  display: block;
  padding: 0 20px;
  text-decoration: none;
  line-height: 40px;
  color: #fff;
}

.navigation ul {
  display: none;
  position: absolute;
  list-style: none;
  margin-left: -3px;
  padding: 0;
}

.navigation ul ul {
  left: 100%;
  top: 0;
}

.navigation ul li {
  float: none;
}

.navigation li:hover>ul {
  display: block;
  background: #1a4655;
  /*          border: solid 3px #fff;*/
  border-top: 0;
  -webkit-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;
  -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
  position: absolute;
}

.navigation li:hover>ul li:hover {
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}

.navigation li li a:hover {
  background: #0c323f;
  color: white;
}

.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}

<div class="menu">
  <ul class="navigation">
    <li><a href="/domain/admin/index.php" title="Home">Home</a></li>
    <li><a href="/domain/admin/test.php" title="Requests">Requests</a>
      <ul>
        <li><a href="" title="Boxes">Boxes</a>
          <ul>
            <li><a href="" title="Files">Files</a></li>
            <li><a href="" title="Recycle">Recycle</a></li>
            <li><a href="" title="Box Supply">Box Supply</a></li>
          </ul>
        </li>
        <li><a href="" title="Files">Files</a></li>
        <li><a href="" title="Recycle">Recycle</a></li>
        <li><a href="" title="Box Supply">Box Supply</a></li>
        <li><a href="" title="Recycle">Recycle</a></li>
        <li><a href="" title="Destruction">Destruction</a></li>
        <li><a href="" title="Destruction Schedules">Destruction Schedules</a></li>
      </ul>
    </li>
    <li><a href="" title="Reports">Reports</a></li>
    <li><a href="" title="Invoices">Invoices</a></li>
  </ul>
  <div class="clear"></div>
</div>