Question

我正在查看一个css菜单，该菜单似乎可以满足我的要求，除了我需要根据现有菜单之一创建子菜单之外。

我创建了一个小提琴以显示其当前外观，是否可以通过DropDown 3的第二个选项创建子菜单？

我尝试添加如下子菜单：

<li><a href="#">DropDown 3</a>
    <ul>
        <li><a href="#">Option 1</a></li>
        <li><a href="#">SUB MENU -></a></li>
        <ul>
            <li><a href="#">Option 3</a></li>
            <li><a href="#">Option 4</a></li>
        </ul>
    </ul>
</li>

这将显示新选项，但它们的位置不正确且始终可见。

有人可以建议最好的方法吗？

谢谢

Answer 1

尝试以下操作，并通过将第二个子对象或第三个子对象作为元素来控制要通过CSS隐藏的内容：

<li><a href="#">DropDown 3</a>
    <ul>
        <li><a href="#">Option 1</a></li>
        <li><a href="#">SUB MENU -></a></li>
        <ul>
            <li><a href="#">Option 3</a>
                <ul>
                   <li><a href="#">New sub 1</a></li>
                   <li><a href="#">New sub 2</a></li>
                </ul>
            </li>
            <li><a href="#">Option 4</a></li>
        </ul>
    </ul>
</li>

Answer 2

要添加第三级子菜单，您需要在要创建子菜单的项目的li中添加ul。然后，您需要将样式从li:hover ul更改为li:hover > ul，以使其仅针对已悬停的当前li的直接子级列表：

.clearfix {
  clear: both;
}

nav {
  background: rgba(212, 228, 239, 1);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=0);
  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.4);
  padding: 0 10px;
  position: relative;
}

.menu li {
  float: left;
  position: relative;
  max-width: 100px;
}

.menu li a {
  color: #000000;
  display: block;
  font-size: 14px;
  line-height: 20px;
  padding: 6px 10px;
  margin: 8px 8px;
  vertical-align: middle;
  text-decoration: none;
}

.menu li a:hover {
  background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
  background-image: linear-gradient(#ededed, #fff);
  box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
  color: #222;
}

.menu ul {
  position: absolute;
  left: -9999px;
  list-style: none;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 99;
}

.menu ul li {
  float: none;
  max-width: 450px;
  text-overflow: ellipsis;
}

.menu ul a {
  white-space: nowrap;
}

.menu li:hover>ul {
  background: rgba(212, 228, 239, 1);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=0);
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.4);
  left: 5px;
  opacity: 1;
  z-index: 99;
}

.menu li:hover a {
  background: rgba(212, 228, 239, 1);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#6296bd', GradientType=0);
}

.menu li:hover ul a {
  background: none;
  box-shadow: none;
}

.menu li:hover ul li a:hover {
  background: rgba(212, 228, 239, 1);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc', GradientType=0);
}


/* position this third menu where you want */

.menu ul ul {
  left: 100%;
  top: 0;
}

<div id="content">

  <div class="wrap">
    <nav>
      <ul class="menu">
        <li><a href="">Home</a></li>
        <li><a href="#">DropDown</a>
          <ul>
            <li><a href="">Option 1</a></li>
          </ul>
        </li>
        <li><a href="#">DropDown 2</a>
          <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
          </ul>
        </li>
        <li><a href="#">DropDown 3</a>
          <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">SUB MENU -></a>

              <!-- add this ul INSIDE the li -->
              <ul>
                <li><a href="#">Option 3</a></li>
                <li><a href="#">Option 4</a></li>
              </ul>

            </li>
          </ul>
        </li>
      </ul>
      <div class="clearfix"></div>
    </nav>
  </div>


</div>

上面显示了如何执行此操作，您可能需要更改第三级ul的某些样式，以便它显示在所需位置（您可以使用.menu ul ul {}）

将子菜单添加到CSS菜单

2 个答案: