menú vertical pure css con el submenú

Question

Hice mi investigación y pude replicar lo que estoy buscando, bueno, algo así como - Solo necesito ayuda con un menú CSS vertical, puro y más específico.

Quiero que aparezca mi submenú emergente 10px a la izquierda del atributo a no li como la mayoría de los ejemplos encontrados en Internet. También estoy buscando el tipo de menú CSS más simple y puro: nada lujoso.

Aquí es lo que he hecho hasta ahora:

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

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

¿Cómo lo hacen por lo que el menú de nivel secundario aparece cuando se ciernen la a ancla HTML, no el li, y 10px a la izquierda del ancla a cliqueada? Gracias.

Answer 1

Prueba con esto y creo que va a ayudar a

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