Question

我想创建一个导航菜单，并带有几个下拉菜单。（我上班了）现在，我想在下拉列表1中放入另一个子菜单。但是我似乎无法正常工作。我该怎么做才能使子菜单1的行为像下拉菜单1？我想使嵌套下拉菜单像3级下拉菜单一样。

谢谢您的时间。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vertical Drop-Down Navigation using HTML & CSS</title>
<style type="text/css">
* {padding:0; margin:0;}
a {text-decoration: none;}
li {list-style: none;}
/* Navigation STyling */
.main-nav {width: 250px; background: #033677;}
.main-nav a {
    text-transform: uppercase;
    letter-spacing: .2em;
    color: #FFF;
    display: block;
    padding: 10px 0 10px 20px;
    border-bottom: 1px dotted red;
}


.main-nav a:hover {background: #C71E54;}


.sub-nav-ul ul {display: none;}
.sub-nav-ul li:hover ul {display: block;}

.main-nav-ul ul {display: none;}
.main-nav-ul li:hover ul {display: block;}

.main-nav-ul ul a:before {
    content: '\203A';
    margin-right: 20px;
}

.main-nav .sub-arrow:after {
    content: '\203A';
    float: right;
    margin-right: 20px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}
.main-nav li:hover .sub-arrow:after {
    content: '\2039';
}
</style>
</head>

<body>

<nav class="main-nav">
    <ul class="main-nav-ul">
    <li><a href="#">Home</a></li>

      <li><a href="#">DropDown 1<span class="sub-arrow"></span></a>
        <ul>
            <ul class="sub-nav-ul">
              <li><a href="#">SUB Menu 1<span class="sub-arrow"></span></a>
                <ul>
                    <li><a href="#">Sub Item 1X</a></li>
                    <li><a href="#">Sub Item 2X</a></li>
                    <li><a href="#">Sub Item 3X</a></li>
                    <li><a href="#">Sub Item 4X</a></li>
                </ul>
              </li>
            </ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
         </ul>
      </li>
      <li><a href="#">LINK 1</a></li>
      <li><a href="#">Dropdown 2<span class="sub-arrow"></span></a>
        <ul>
            <li><a href="#">Item 5</a></li>
            <li><a href="#">Item 6</a></li>
            <li><a href="#">Item 7</a></li>
            <li><a href="#">Item 8</a></li>
        </ul></li>
      <li><a href="#">LINK 2</a></li>
      <li><a href="#">LINK 3</a></li>
   </ul>
</nav>

</body>
</html>

Answer 1

将child combinator >选择器添加到您的代码中，以特定于后代级别。

.main-nav-ul > li > ul {display: none;}
.main-nav-ul li:hover > ul {display: block;}

.sub-nav-ul > li > ul {display: none;}
.sub-nav-ul li:hover > ul {display: block;}

现在，当您将鼠标悬停在.main-nav-ul li上时，您将block样式应用于嵌套在ul中的所有 .main-nav-ul元素，其中还包括嵌套在ul列表内的所有.sub-nav-ul元素。使用>选择器将仅应用于直接后代，因此，将鼠标悬停在父级.main-nav-ul li上时，不会影响那些嵌套在其他元素中的子孙。然后，将鼠标悬停在.sub-nav-ul li上也仅适用于其自己的直接后代。

这是完整的工作代码：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vertical Drop-Down Navigation using HTML & CSS</title>
    <style type="text/css">
      * {padding:0; margin:0;}
      a {text-decoration: none;}
      li {list-style: none;}
      /* Navigation STyling */
      .main-nav {width: 250px; background: #033677;}
      .main-nav a {
        text-transform: uppercase;
        letter-spacing: .2em;
        color: #FFF;
        display: block;
        padding: 10px 0 10px 20px;
        border-bottom: 1px dotted red;
      }


      .main-nav a:hover {background: #C71E54;}

      .main-nav-ul > li > ul {display: none;}
      .main-nav-ul li:hover > ul {display: block;}

      .sub-nav-ul > li > ul {display: none;}
      .sub-nav-ul li:hover > ul {display: block;}


      .main-nav-ul ul a:before {
        content: '\203A';
        margin-right: 20px;
      }

      .main-nav .sub-arrow:after {
        content: '\203A';
        float: right;
        margin-right: 20px;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
      }
      .main-nav li:hover .sub-arrow:after {
        content: '\2039';
      }
    </style>
  </head>

  <body>

    <nav class="main-nav">
      <ul class="main-nav-ul">
        <li><a href="#">Home</a></li>

        <li><a href="#">DropDown 1<span class="sub-arrow"></span></a>
          <ul class="level1">
            <ul class="sub-nav-ul">
              <li><a href="#">SUB Menu 1<span class="sub-arrow"></span></a>
                <ul class="level2">
                  <li><a href="#">Sub Item 1X</a></li>
                  <li><a href="#">Sub Item 2X</a></li>
                  <li><a href="#">Sub Item 3X</a></li>
                  <li><a href="#">Sub Item 4X</a></li>
                </ul>
              </li>
            </ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
          </ul>
        </li>
        <li><a href="#">LINK 1</a></li>
        <li><a href="#">Dropdown 2<span class="sub-arrow"></span></a>
          <ul>
            <li><a href="#">Item 5</a></li>
            <li><a href="#">Item 6</a></li>
            <li><a href="#">Item 7</a></li>
            <li><a href="#">Item 8</a></li>
          </ul></li>
        <li><a href="#">LINK 2</a></li>
        <li><a href="#">LINK 3</a></li>
      </ul>
    </nav>

  </body>
</html>

Answer 2

这里是参考链接，您可以在其中获得多级垂直下拉菜单

https://bootsnipp.com/snippets/prnvG

https://bootsnipp.com/tags/sidebar

https://www.codeply.com/go/NHX6wfzwdE/bootstrap-4-vertical-menu-with-submenu

CSS垂直多级下拉菜单问题

2 个答案: