html - 如何使下拉子菜单出现在其父级旁边

Question

我有一个包含子菜单的菜单，该菜单在大多数情况下都运行良好。但是，当您单击菜单中的某个元素时，子菜单会打开但不会排列在所选元素的旁边。它只是停留在主菜单旁边的顶部。

解释起来相当困难，所以我将代码作为片段发布在上面，如果有人能指出我的错误，我将不胜感激。非常感谢

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

.navigation {
  list-style: none;
  padding: 0;
  margin: 0 0 0 16px;
  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;
  width: 250px;
  border-bottom-left-radius: 0 !important;
}

.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;
  width: 250px;
}

.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="Add">Add Box(es)</a></li>
            <li><a href="" title="Retrievals">Retrievals</a></li>
            <li><a href="" title="Returns">Returns</a></li>
            <li><a href="" title="Destructions">Destructions</a></li>
            <li><a href="" title="Permanent Retrieval">Permanent Retrieval</a></li>
          </ul>
        </li>
        <li><a href="" title="Boxes">Files</a>
          <ul>
            <li><a href="" title="Add">Add File(s)</a></li>
            <li><a href="" title="Retrievals">Retrievals</a></li>
            <li><a href="" title="Returns">Returns</a></li>
            <li><a href="" title="Destructions">Destructions</a></li>
            <li><a href="" title="Permanent File Retrieval">Permanent File Retrieval</a></li>
          </ul>
        </li>
        <li><a href="" title="Boxes">Recycle Collection</a>
          <ul>
            <li><a href="" title="Sacks">Sacks</a></li>
            <li><a href="" title="Boxes">Boxes</a></li>
          </ul>
        </li>
        <li><a href="" title="Box Supply">Box Supply</a></li>
        <li><a href="" title="Sack Supply">Sack Supply</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

将position: relative添加到.navigation ul li。

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

.navigation {
  list-style: none;
  padding: 0;
  margin: 0 0 0 16px;
  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;
  width: 250px;
  border-bottom-left-radius: 0 !important;
}

.navigation ul li {
  float: none;
  position: relative;
}

.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;
  width: 250px;
}

.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="Add">Add Box(es)</a></li>
            <li><a href="" title="Retrievals">Retrievals</a></li>
            <li><a href="" title="Returns">Returns</a></li>
            <li><a href="" title="Destructions">Destructions</a></li>
            <li><a href="" title="Permanent Retrieval">Permanent Retrieval</a></li>
          </ul>
        </li>
        <li><a href="" title="Boxes">Files</a>
          <ul>
            <li><a href="" title="Add">Add File(s)</a></li>
            <li><a href="" title="Retrievals">Retrievals</a></li>
            <li><a href="" title="Returns">Returns</a></li>
            <li><a href="" title="Destructions">Destructions</a></li>
            <li><a href="" title="Permanent File Retrieval">Permanent File Retrieval</a></li>
          </ul>
        </li>
        <li><a href="" title="Boxes">Recycle Collection</a>
          <ul>
            <li><a href="" title="Sacks">Sacks</a></li>
            <li><a href="" title="Boxes">Boxes</a></li>
          </ul>
        </li>
        <li><a href="" title="Box Supply">Box Supply</a></li>
        <li><a href="" title="Sack Supply">Sack Supply</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>