Desplazar un elemento y cambiar otro (sin usar Javascript)

Tengo un menú CSS anidado que no puedo obtener para que aparezcan los submenús.Desplazar un elemento y cambiar otro (sin usar Javascript)

Tomé el código de A list apart. El ejemplo en ese sitio funciona perfectamente bien, pero dado que tengo 2 menús de navegación CSS en mi página, tengo que poner mis elementos HTML en diferentes clases de CSS.

Aquí está mi código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
    ul#lvl1 { 
     margin:0; 
     padding:0; 
     list-style:none; 
     width:150px; /* Width of Menu Items */ 
     border-bottom:1px solid #ccc; 
    } 
    li.lvl1 {position:relative} 
    ul.lvl2 { 
     position: absolute; 
     left: 149px; /* Set 1px less than menu width */ 
     top: 0; 
     display: none; 
    } 
    /* Styles for Menu Items */ 
    li.lvl1 > a { 
     display: block; 
     text-decoration: none; 
     color: #777; 
     background: #fff; /* IE6 Bug */ 
     padding: 5px; 
     border: 1px solid #ccc; 
     border-bottom: 0; 
    } 
    /* Fix IE. Hide from IE Mac \*/ 
    * html.lvl1 > ul > li {float:left;height:1%} 
    * html.lvl1 > ul > li > a {height:1%} 
    /* End */ 
    li.lvl2 > a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */ 
    li.lvl2 > a { padding: 2px 5px; } /* Sub Menu Styles */ 
    a.lvl1:hover ul.lvl2 {display: block} /* The magic */ 
    </style> 
</head> 
<body> 
    <ul id="lvl1"> 
    <li class="lvl1"> 
     <a class="lvl1" href="#">item1</a> 
     <ul class="lvl2"> 
     <li class="lvl2"> 
      <a class="lvl2" href="#">subitem1</a> 
     </li> 
     </ul> 
    </li> 
    <li class="lvl1"> 
     <a class="lvl1" href="#">item2</a> 
     <ul class="lvl2"> 
     <li class="lvl2"> 
      <a class="lvl2" href="#">subitem2</a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</body> 
</html>

Ahora, cuando se ciernen sobre la "a" en el nivel 1, el "ul" en el nivel 2 no va a llegar. Por favor alguien puede arrojar algo de luz? Me puede estar perdiendo algo obvio. ¡Gracias!

Fuente

2011-10-20 Arlington

Debe cambiar su selector de CSS para apuntar al lvl2 <ul>, ya que ya no está anidado (es un hermano, entonces use +).

a.lvl1:hover + ul.lvl2 {display: block} /* The magic */

Debe leer este list of css selectors.

O puede mover el vuelo estacionario sobre el lvl1 <li>, en lugar del anclaje

li.lvl1:hover ul.lvl2 {display: block} /* The magic */

Fuente

2011-10-20 07:45:19

Navegar apoyo para los selectores de esa variable. Si necesita soportar ie6, entonces no haga esto. –

+49

lástima el que todavía necesita apoyar ie6! – Jawad

Desplazar un elemento y cambiar otro (sin usar Javascript)

Respuesta

Cuestiones relacionadas