如何在其父级旁边显示下拉子菜单

时间：2018-01-27 15:12:43

标签： css html5 css3

我有一个菜单，其中包含一个子菜单，大多数部分都适用。但是，当您单击菜单中的某个项目时，子菜单会打开，但不会在所选项目旁边排队。它只是作为主菜单旁边的顶部。

这很难解释，因此我将代码作为一个代码段发布，如果有人能指出我的错误，我会很感激。非常感谢

.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>

1 个答案:

答案 0 :(得分：1)

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

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题