html - 我的 CSS 下拉菜单中需要第三级

Question

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

这是我的菜单 HTML:

<ul class="nav">
        <li class="home"><a href="index1.php">Home</a></li>
        <li><a href="aboutus.html">About Us</a></li>
        <li><a href="#">Residential</a>
         <ul>
                <li><a href="carpet.html">Carpet</a></li>
                <li><a href="upholstary.html">Upholstery</a></li>
                <li><a href="rugs.html">Rugs</a></li>
                <li><a href="airducts.html">Air Ducts</a></li>
            </ul>
        </li>
        <li><a href="#">Commercial</a>
            <ul>
                <li class="sub"><a href="com_carpet.html">Carpet</a>
                <ul><a href="com_carpet.html">tester</a></ul>
                </li>
                <li><a href="com_upholstery.html">Upholstery</a></li>

            </ul>
        </li>

        <li class="activeitem"><a href="general-house-cleaning.html">General House Cleaning </a></li>
        <li><a href="contactus.php">Contact Us</a></li>
        <li class="lastnav"><a href="fr/grand_manage.html">Français</a></li>
    </ul>
</div>

这是我的 CSS:

ol, ul {
    list-style: none;
    line-height: 24px;
}

.nav {
    clear:both;
    background:url(../images/navbg.png) 0 0 no-repeat;
    height:46px;
    border-top: solid 3px #72592a;
    padding: 1px 0 0 0;
}
.nav li {
    float: left;
    line-height: 45px;
    border-right: solid 1px #56713c;
    position: relative;
}
.nav li:hover {
    background: url(../images/activebg.png) 0 0 repeat-x;
}

.nav .home:hover {
background: url(../images/home_active_bg.png) bottom left repeat-x;
}
.nav li.activeitem {
    background: url(../images/activebg.png) 0 0 repeat-x;
}
.nav li.activehome {
    background: url(../images/home_active_bg.png) 0 0 repeat-x;
}

.nav li.lastnav {
    float: right;
    border: 0 none;
    padding: 0 0px 0 0;
}

.nav li.lastnav:hover {
    -webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;
}

.nav li.lastnav a {
    color: #000;
    border-right:none;
    font-size:12px;
}
.nav li.lastnav img {
    float: left;
    padding: 17px 5px 0 0;
}

.nav li a {
    display: block;
padding: 0 15px;
font-size: 13px;
color: white;
border-right: solid 1px #A6C079;
font-weight: bold;
text-transform: uppercase;
}
.nav li ul {
    position: absolute;
    display: none;
    width: 200px;
    background: #54703a;
    z-index: 6500;
}
.nav li:hover ul {
    display: block;
}
.nav li ul li {
    border: none;
    float: none;
    border-bottom: solid 1px #fff;
    line-height:32px;
    background:#F0F0F0;


}
.nav li ul li a {
font-size:12px;
color:#000;
}
.nav li a:hover {
text-decoration:none;
}
.nav li ul li a:hover {
text-decoration:none;
color:#fff;
}

任何帮助将不胜感激

谢谢! 此致 伊斯梅尔

Answer 1

<ul class="nav">
  <li>
    <a></a>
    <ul>
      <li>
        <a></a>
        <ul>
          <li>
            <a></a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS 也像以前一样

.nav li ul li ul, .nav li ul li ul li, .nav li ul li ul li a