サブメニュー付きの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は数百文字のコードを減らしました。私はこれが役立つことを願っています

EDITED：これらのサブメニューをどのように実行できるかについて、この回答にコメントが付いた合理的なコード例を追加しました。私が探していたされて正確に何

#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>