如何在我的 CSS 下拉菜单中添加第三级？

Posted 2023-04-13

【中文标题】如何在我的 CSS 下拉菜单中添加第三级？

【英文标题】：How to add a 3rd level to my CSS drop down menu?

【发布时间】：2012-09-03 19:12:16

【问题描述】：

我有一个在所有浏览器中看起来都很棒的 2 级下拉菜单。现在我想添加第三级。我该怎么做？

这是我的菜单 html：

    <div class="nav">
        <div class="navbar">
            <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About JoyFactory</a>
                <ul class="sub-menu">
                <li><a href="#">Who We Are</a></li>
                <li><a href="#">Our Education Concept</a></li>
                <li><a href="#">References</a></li>
                </ul>
            </li>
            <li><a href="#">JoyFactory Kinderkrippe</a>
                <ul class="sub-menu">
                <li><a href="#">JoyFactory Kinderkrippe Oerlikon</a>
                    <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="#">JoyFactory Kinderkrippe Seebach</a></li>
                </ul>
            </li>
            </ul>
        </div>
    </div>

这是我的 CSS：

    .nav     clear:both ;
    width:1020px ;
    height:55px ;
    background:url("images/nav-bg.png") no-repeat ;
    position:absolute ;
    top:125px ;
    left:-10px ;
    

        .navbar  width:1000px ;
        height:50px ;
        margin:auto ;
        

            ul.menu  margin-left:0 ;
            padding-left:0 ;
            list-style-type:none ;
            

            .menu li     display:inline ;
            float:left ;
            height:50px ;
            margin:0 6px ;
            

            .menu li a   font-family:'MyriadPro-SemiboldCond' ;
            font-size:24px ;
            color:#ffffff ;
            text-decoration:none ;
            height:50px ;
            line-height:50px ;
            padding:0px 10px ;
            

            .menu li:hover, .menu li:hover a  background:#ffd322 ;
            color:#e32a0e ;
            

          .sub-menu  position:absolute ;
          float:none ;
          padding:0 ;
          top:50px ;
          z-index:9999 ;
          background:#ffd322 ;
          margin-left:0 ;
          padding-left:0 ;
          

          .sub-menu li  display:none ;
          min-width:175px !important ;
          margin: 0 !important;
          padding: 0 !important;
          

          .sub-menu li a, .current-menu-parent .sub-menu li a    display:block ;
          background:#ffd322 ; 
          font-family:arial,helvetica,sans-serif ;
          font-size:16px ;
          padding:0 10px ;
          border-top:1px solid #f37f10 ;
          border-left:none ;
          

          .sub-menu li a:hover, .menu li.current-menu-parent .sub-menu li.current-menu-item a    background:#f37f10 

          .menu li:hover li  float: none; display:block; clear: both; 

任何帮助将不胜感激！

非常感谢:)

【问题讨论】：

我尝试了很多不同的东西，代码都在我的脑海里混在一起了 :) 我坚持使用纯 CSS - 没有 jquery。

查看你的 CSS。你有 .sub-menu 和它下面的 .sub-menu .... .sub-menu 等等。我需要提到你需要做什么来设置你的 3 级菜单的样式吗？

该子菜单用于第二级菜单。

【参考方案1】：

这是一个基本的子菜单设置：http://jsfiddle.net/Wss5A/

* 
    list-style:none;
    margin:0;
    padding:0;
    font-size:1em;
    cursor:pointer;


#menu
    margin:3px;


#menu > li            /* Top Level */
    float:left;
    margin-right:3px;

#menu > li > span
    display:block;
    background:#0ac;
    padding:3px 10px;

#menu > li:hover > span
    color:#fff;


#menu > li > ul        /* Second Level */
    display:none;
    background:#08a;

#menu > li:hover > ul
    display:block;
    position:absolute;

#menu > li > ul > li > span
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;

#menu > li > ul > li:hover > span
    color:#fff;


#menu > li > ul li > ul   /* Third Level & beyond */
    display:none;
    background:#068;

#menu > li > ul li:hover > ul
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:0;
    width:auto;

#menu > li > ul > li ul > li
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
    white-space:nowrap;

#menu > li > ul > li ul > li:hover > span
    color:#fff;