純CSS垂直菜單與子菜單

我做了我的研究，並能夠複製我在找的東西，好樣 - 我只需要一個更具體的垂直，純CSS的菜單幫助。純CSS垂直菜單與子菜單

我希望我的子菜單彈出窗口出現在10px的左側，而不是像li屬性，就像在互聯網上找到的大多數例子一樣。我也在尋找最簡單，純粹的CSS類型的菜單 - 沒有什麼奇特的。

這是我到目前爲止已經完成：

<div id="nav"> 
    <ul class="top-level"> 
     <li><a href="#">This is a long text</a> 
      <ul class="sub-level"> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 2</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact me here</a></li> 
     <li><a href="#">Help</a> 
      <ul class="sub-level"> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 2</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </li> 
    </ul>

我的CSS：

#nav {border:1px solid cyan;} 
    /* top level menu */ 
    #nav ul.top-level {border:1px solid red;} 
    #nav ul.top-level li {position:relative;} 

    /* sub level menu */ 
    #nav ul.sub-level {border:1px solid yellow;} 
    #nav ul.sub-level {display:none;} /* hide */ 

    /* hover the sub menu*/ 
    #nav ul.top-level li:hover .sub-level {display: block; position:absolute; top:5px;}

我如何讓它這樣子水位菜單彈出，當我懸停a HTML定位點，而不是li，以及點擊的a定位點左側的10px？謝謝。

來源

2012-05-07 Marco

你不能做到這一點與純CSS，你將有爲此使用JS。儘管CSS4可以實現...這是一個很長的路要走。在懸停li時打開菜單沒有任何問題，您可以將錨定爲li的準確高度/寬度，並且不會有太大區別。 – sg3s

試試這一個，我認爲這將有助於

HTML

<div id="nav"> 
    <ul class="top-level"> 
     <li><a href="#">This is a long text</a> 
      <ul class="sub-level"> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 2</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact me here</a></li> 
     <li><a href="#">Help</a> 
      <ul class="sub-level"> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 2</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

CSS

#nav {font-size:0.75em; width:150px;} 
#nav ul {margin:0px; padding:0px;} 
#nav li {list-style: none;} 

ul.top-level {background:#FFFFFF;} 
ul.top-level li { 
border: #FF0000 solid; 
border-width: 1px; 
} 
#nav ul.sub-level {border:1px solid yellow;} 
#nav a { 
color: #000000; 
cursor: pointer; 
display:block; 
height:25px; 
line-height: 25px; 
text-indent: 10px; 
text-decoration:none; 
width:100%; 
} 
#nav a:hover{ 
text-decoration:underline; 
} 

#nav li:hover { 
background: #f90; 
position: relative; 
} 
ul.sub-level { 
    display: none; 
} 
li:hover .sub-level { 
    background: #999; 
    border: #fff solid; 
    border-width: 1px; 
    display: block; 
    position: absolute; 
    left: 75px; 
    top: 5px; 
} 
ul.sub-level li { 
    border: none; 
    float:left; 
    width:150px; 
} 

#nav .sub-level { 
    background: #FFFFFF; 
}

來源

2012-05-07 06:24:17 Jhilom

純CSS垂直菜單與子菜單

回答

相關問題