Passa il mouse su un elemento e ne modifica un altro (senza utilizzare Javascript)

Ho un menu CSS annidato che non riesco a visualizzare i sottomenu.Passa il mouse su un elemento e ne modifica un altro (senza utilizzare Javascript)

Ho preso il codice da A list apart. L'esempio su quel sito funziona perfettamente bene, ma dal momento che ho 2 menu di navigazione CSS sulla mia pagina, devo mettere i miei elementi HTML in diverse classi CSS.

Ecco il mio codice:

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

Ora, quando mi passa il mouse sopra la "a" al livello 1, il "ul" al livello 2 non verrà su. Qualcuno può per favore versare un po 'di luce? Potrei mancare qualcosa di ovvio. Grazie!

fonte

2011-10-20 Arlington

È necessario modificare il selettore CSS per il target lvl2 <ul>, poiché non è più nidificato (è un fratello, quindi utilizzare +).

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

Si consiglia di leggere questo list of css selectors.

Oppure si potrebbe spostare il passaggio del mouse sul lvl1 <li>, invece dell'ancora

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

fonte

2011-10-20 07:45:19

Sfoglia il supporto per selettori così varia. Se hai bisogno di supportare ie6, allora non farlo. –

+49

Peccato colui che deve ancora supportare ie6! – Jawad

Passa il mouse su un elemento e ne modifica un altro (senza utilizzare Javascript)

risposta

Problemi correlati