将Sub-Sub-Menus添加到子菜单的CSS菜单

Question

我有一个CSS菜单，我正在使用子菜单。我想知道如何去添加一个子子菜单。例如，我将鼠标悬停在主菜单项上并弹出子菜单，然后将鼠标悬停在子菜单项上并弹出另一个子菜单。下面是我现在用的JS小提琴：

http://jsfiddle.net/PrinceofVegas/Dg3yQ/4/

这里是我使用的CSS：

.menu{ 
    border:none; 
    border:0px; 
    margin:0px; 
    padding:0px; 
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; 
    font-size:18px; 
    font-weight:bold; 
} 
.menu ul{ 
    background:#006633; 
    height:35px; 
    list-style:none; 
    margin:0; 
    padding:0; 
} 
.menu li{ 
    float:left; 
    padding:0px; 
} 
.menu li a{ 
    background:#006633 url("../images/seperator.gif") bottom right no-repeat; 
    color:#ffffff; 
    display:block; 
    font-weight:normal; 
    line-height:35px; 
    margin:0px; 
    padding:0px 25px; 
    text-align:center; 
    text-decoration:none; 
} 
.menu li a:hover, .menu ul li:hover a{ 
    background: #003f20 url("../images/hover.gif") bottom center no-repeat; 
    color:#FFFFFF; 
    text-decoration:none; 
} 
.menu li ul{ 
    background:#006633; 
    display:none; 
    height:auto; 
    padding:0px; 
    margin:0px; 
    border:0px; 
    position:absolute; 
    width:225px; 
    z-index:200; 
    /*top:1em; 
    /*left:0;*/ 
} 
.menu li:hover ul{ 
    display:block; 
} 
.menu li li { 
    background:url('../images/sub_sep.gif') bottom left no-repeat; 
    display:block; 
    float:none; 
    margin:0px; 
    padding:0px; 
    width:225px; 
} 
.menu li:hover li a{ 
    background:none; 
} 
.menu li ul a{ 
    display:block; 
    height:30px; 
    font-size:12px; 
    font-style:normal; 
    margin:0px; 
    padding:0px 10px 0px 15px; 
    text-align:left; 
} 
.menu li ul a:hover, .menu li ul li:hover a{ 
    background:#003f20 url('../images/hover_sub.gif') center left no-repeat; 
    border:0px; 
    color:#ffffff; 
    text-decoration:none; 
} 
.menu p{ 
    clear:left; 
} 

这里是我使用的HTML：

<div class="menu"> 
    <ul> 
     <li><a href="#" target="_self" >Main Item 1</a></li> 
     <li><a href="#" target="_self" >Main Item 2</a> 
      <ul> 
       <li><a href="#" target="_self" >Test Sub Item</a></li> 
       <li><a href="#" target="_self" >Test Sub Item</a></li> 
       <li><a href="#" target="_self" >Test Sub Item</a></li> 
       <li><a href="#" target="_self" >Test Sub Item</a></li> 
      </ul> 
     </li> 
     <li><a href="#" target="_self" >Main Item 3</a></li> 
     <li><a href="#" target="_self" >Main Item 4</a> 
      <ul> 
       <li><a href="#" target="_self" >Test Sub Item</a></li> 
       <li><a href="#" target="_self" >Test Sub Item</a></li> 
       <li><a href="#" target="_self" >Test Sub Item</a></li> 
      </ul>     
     </li> 
    </ul> 
</div> 

Answer 1

这里是我将如何接近你正在寻找的东西：http://jsfiddle.net/Dg3yQ/26/

我在修改CSS时采取了一些*度。修订后的CSS将代码缩减了几百个字符，我相信它完成了您的预期。我希望这有帮助。

编辑：增加了一个简化的代码示例，并在这个答案中给出了关于如何完成这些子菜单的注释。

#nav { 
 
    list-style:none inside; 
 
    margin:0; 
 
    padding:0; 
 
    text-align:center; 
 
    } 
 

 
#nav li { 
 
    display:block; 
 
    position:relative; 
 
    float:left; 
 
    background: #006633; /* menu background color */ 
 
    } 
 

 
#nav li a { 
 
    display:block; 
 
    padding:0; 
 
    text-decoration:none; 
 
    width:200px; /* this is the width of the menu items */ 
 
    line-height:35px; /* this is the hieght of the menu items */ 
 
    color:#ffffff; /* list item font color */ 
 
    } 
 
     
 
#nav li li a {font-size:80%;} /* smaller font size for sub menu items */ 
 
    
 
#nav li:hover {background:#003f20;} /* highlights current hovered list item and the parent list items when hovering over sub menues */ 
 

 

 

 
/*--- Sublist Styles ---*/ 
 
#nav ul { 
 
    position:absolute; 
 
    padding:0; 
 
    left:0; 
 
    display:none; /* hides sublists */ 
 
    } 
 

 
#nav li:hover ul ul {display:none;} /* hides sub-sublists */ 
 

 
#nav li:hover ul {display:block;} /* shows sublist on hover */ 
 

 
#nav li li:hover ul { 
 
    display:block; /* shows sub-sublist on hover */ 
 
    margin-left:200px; /* this should be the same width as the parent list item */ 
 
    margin-top:-35px; /* aligns top of sub menu with top of list item */ 
 
    }

<ul id="nav"> 
 
    <li><a href="#">Main Item 1</a></li> 
 
    <li><a href="#">Main Item 2</a> 
 
    <ul> 
 
     <li><a href="#">Sub Item</a></li> 
 
     <li><a href="#">Sub Item</a></li> 
 
     <li><a href="#">SUB SUB LIST &raquo;</a> 
 
     <ul> 
 
      <li><a href="#">Sub Sub Item 1</a> 
 
      <li><a href="#">Sub Sub Item 2</a> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Main Item 3</a></li> 
 
</ul>