menu verticale puro css con il sottomenu

Question

Ho fatto la mia ricerca ed è stato in grado di replicare quello che sto cercando, benissimo - ho solo bisogno di aiuto con un menu verticale specifico, puro CSS.

Desidero che il mio sottomenu popup appaia a 10px a sinistra di a non l'attributo li come la maggior parte degli esempi trovati su Internet. Sto anche cercando il più semplice, puro CSS, tipo di menu - Niente di speciale.

Ecco che cosa ho fatto finora:

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

mio 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;} 

Come faccio a fare in modo che il menu di livello sub si apre quando mi passa il a Ancora HTML, non lo li e 10px a sinistra dell'ancora cliccata a? Grazie.

Answer 1

Provate questo e penso che vi aiuterà

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; 
}