CSS Verticla菜單與子菜單

Question

我一直在嚴格使用CSS的垂直菜單工作。

當用戶將鼠標懸停在頂層菜單上時，所有子菜單都應垂直顯示爲父菜單。我試圖複製的例子是這樣的網站上使用的：http://blackdoctor.org/

下面是HTML代碼塊我已經寫：

<!-- divPgContent STARTS --> 
<div id="divPgContent" style="height:200px;"> 

<!-- divTopMenu1 STARTS --> 
<div id="divTopMenu1"> 

    <ul id="topmenu1" class="menu"> 
     <li class="current active"><a href="/">Home</a></li> 
     <li><a target="_blank" href="#">Menu 2</a></li> 
     <li><a target="_blank" href="#">Menu 3</a></li> 
     <li><a target="_blank" href="#">Menu 4</a></li> 
     <li><a target="_blank" href="#">Menu 5</a></li> 
     <li><a href="javascript:void(0);">Menu 6</a> 
      <ul> 
       <li><a href="#">Sub Menu 1</a></li> 
       <li><a href="#">Sub Menu 2</a></li> 
       <li><a href="#">Sub Menu 3</a></li> 
       <li><a href="#">Sub Menu 4</a></li> 
       <li><a href="#">Sub Menu 5</a></li> 
       <li><a href="#">Sub Menu 6</a></li> 
       <li><a href="#">Sub Menu 7</a></li> 
       <li><a href="#">Sub Menu 8</a></li> 
       <li><a href="#">Sub Menu 9</a></li> 
      </ul> 
     </li> 
     <li><a href="javascript:void(0);">Menu 7</a> 
      <ul> 
       <li><a href="#">Sub Menu 1</a></li> 
       <li><a href="#">Sub Menu 2</a></li> 
       <li><a href="#">Sub Menu 3</a></li> 
       <li><a href="#">Sub Menu 4</a></li> 
       <li><a href="#">Sub Menu 5</a></li> 
       <li><a href="#">Sub Menu 6</a></li> 
       <li><a href="#">Sub Menu 7</a></li> 
       <li><a href="#">Sub Menu 8</a></li> 
       <li><a href="#">Sub Menu 9</a></li> 
      </ul> 
     </li> 
     <li><a href="javascript:void(0);">Menu 7</a> 
      <ul> 
       <li><a href="#">Sub Menu 1</a></li> 
       <li><a href="#">Sub Menu 2</a></li> 
       <li><a href="#">Sub Menu 3</a></li> 
       <li><a href="#">Sub Menu 4</a></li> 
       <li><a href="#">Sub Menu 5</a></li> 
       <li><a href="#">Sub Menu 6</a></li> 
       <li><a href="#">Sub Menu 7</a></li> 
       <li><a href="#">Sub Menu 8</a></li> 
       <li><a href="#">Sub Menu 9</a></li> 
      </ul> 
     </li> 
    </ul> 

    <div class="divClr"></div> 

</div> 
<!-- divTopMenu1 ENDS --> 

<div class="divClr"></div> 

</div> 
<!-- divPgContent ENDS --> 

這裏是我的CSS：

#divPgContent 
    { 
     width:980px; 
     height:auto; 

     margin:0px auto 0px auto; 
     padding:15px 15px; 

     border:2px solid #E4E8EA; 
    } 

    /* divTopMenu1 STARTS */ 
    ul#topmenu1 
    { 
     width:100%; 
     height:100%; 

     margin:0px 0px; 
     padding:0px 0px; 
    } 
     ul#topmenu1 li 
     { 
      float: left; 
      height: 36px; 
      margin: 0 0px; 

      display:inline; 
      list-style:none; 
      margin:0px 0px; 
      text-shadow:-1px -1px 1px rgba(0, 0, 0, 0.4); 
     } 
      #divTopMenu1 ul li.current, 
      #divTopMenu1 ul li a:hover 
      { 
       color:#FFFFFF; 
       background-color:#6ABD45; 
      } 
      ul#topmenu1 a 
      { 
       display:block; 
       cursor:pointer; 

       padding:10px 10px; 

       text-decoration:none; 

       font-size: 90%; 
       font-weight:bold; 

       color:#FFFFFF; 
      } 


    ul#topmenu1 ul li 
    { 
     height:auto; 
    } 
    ul#topmenu1 li ul li span.separator 
    { 
     font-size:90%; 
    } 
    #topmenu1 li ul li span .img 
    { 
     display:none; 
    } 
    ul#topmenu1 li:hover>* 
    { 
     display:block; 
    } 
    ul#topmenu1 li:hover 
    { 
     position:relative; 
     border-bottom:transparent; 
    } 


    ul#topmenu1 ul 
    { 
     margin:0px 0px; 
     padding:0px 0px; 

     display:none; 
     position:absolute; 
     left:-407px; 
     top:100%; 

     min-width:950px;  
     background-color:#6ABD45; 
     z-index:50000; 
    } 

    ul#topmenu1 ul a 
    { 
     font-size:90%; 
     width:130px; 
    } 
    ul#topmenu1 ul li 
    { 
     height: 42px; 
     margin: 0 0px; 

     list-style:none; 
     margin:0px 0px; 
     text-shadow:-1px -1px 1px rgba(0, 0, 0, 0.4); 
    } 

    ul#topmenu1 ul li:hover>a 
    { 
     text-decoration:none; 
     background-color:#6ABD45; 
    } 



    ul#topmenu1 ul ul 
    { 
     position:absolute; 
     left:100%; 
     top:0; 
    } 



    ul#topmenu1>li, ul#topmenu1 li 
    { 
     margin:0; 
    } 
    #topmenu1 li .separator 
    { 
     cursor: pointer; 
     display: block; 
     font-size: 110%; 
     font-weight:bold; 
     text-transform: lowercase; 
     text-decoration:none; 
     padding:15px 15px; 
     color:#FFFFFF; 
    } 
    ul#topmenu1 .deeper ul li:hover>a 
    { 
     text-decoration:none; 
     background-color:#105F7D; 
    } 
    /* divTopMenu1 ENDS */ 

任何幫助將不勝感激。

謝謝。

Answer 1

我想這就是你綁達到什麼：

http://jsfiddle.net/Qwzv5/

注意，我轉移了position: relative聲明的ul#topmenu1這樣就可以絕對位置你在一個元素的子菜單即不依賴於當前活動的<li>。

的top和left成爲：

ul#topmenu1 ul 
{ 
    ... 

    left:0; 
    top:39px; 
} 

---

注意：你的CSS是一個有點冗長，不過，就可以實現同樣的事情更簡潔的代碼我猜