需要在我的CSS下拉菜單中的第3級

我有一個2級下拉菜單，看起來不錯。現在我想添加一個第三級。我怎麼做？需要在我的CSS下拉菜單中的第3級

這裏是我的菜單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; 
}

任何幫助，將不勝感激

謝謝！最好的問候伊斯梅爾

來源

2013-03-09 Smail Jaâfari

沒有什麼不同比你已經這樣做只是增加一個li元素中的另一UL和格式化你的CSS accordingling – amof 2013-03-09 00:52:27

<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

來源

2013-03-09 00:56:17 madhushankarox

需要在我的CSS下拉菜單中的第3級

回答

相關問題