文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS垂直多级下拉菜单问题

问CSS垂直多级下拉菜单问题
EN

Stack Overflow用户

提问于 2020-02-20 23:12:39

回答 2查看 2.7K关注 0票数 2

我想做一个导航菜单，有几个下拉菜单。(我开始工作了)现在我想把另一个子菜单下拉到下拉菜单中。但是我似乎不能让它工作。我要怎么做才能使子菜单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>

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-02-20 23:47:11

将子组合器 >选择器添加到您的代码中，使其特定于子代级别。

.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样式应用于嵌套在.main-nav-ul中的所有 ul元素，其中还包括嵌套在.sub-nav-ul列表中的所有ul元素。使用>选择器只会将应用于直接后代，因此，当您悬停在父元素上时，不会影响那些嵌套在其他元素中的元素。然后，在.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>

票数 2

Stack Overflow用户

发布于 2020-02-21 06:29:02

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

https://bootsnipp.com/snippets/prnvG

https://bootsnipp.com/tags/sidebar

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60329925

复制

相似问题

问CSS垂直多级下拉菜单问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS垂直多级下拉菜单问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS垂直多级下拉菜单问题
EN