Bir öğenin üzerine gelin ve bir başkasını değiştirin (Javascript kullanmadan)

Alt menülere ulaşamadığım yuvalanmış bir CSS menüsüne sahibim.Bir öğenin üzerine gelin ve bir başkasını değiştirin (Javascript kullanmadan)

Kodu A list apart'dan aldım. Bu sitedeki örnek gayet iyi çalışıyor, ancak sayfamda 2 CSS gezinme menümüm olduğundan, HTML öğelerini farklı CSS sınıflarına yerleştirmem gerekiyor. Ben üzerine geldiğinizde

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

Şimdi "a" 1. seviyede, düzey 2 "ül" gelmeyecek:

İşte benim kodudur. Birisi biraz ışık tutabilir mi? Açık bir şey eksik olabilirim. Teşekkürler!

kaynak

2011-10-20 Arlington

Artık yuvalanmadığı için lvl2 <ul>'u hedeflemek için CSS seçicinizi değiştirmeniz gerekir (bu bir kardeştir, bu nedenle + kullanın).

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

Bu list of css selectors okumalısınız.

Ya da değişir gibi seçicileri yerine çapa

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

kaynak

2011-10-20 07:45:19

göz destek arasında lvl1 <li> üzerinde hover hareket edebiliyordu. Eğer ie6'yı desteklemeniz gerekiyorsa bunu yapmayın. –

+49

, hala desteklemesi gereken kişilere yazık! – Jawad

Bir öğenin üzerine gelin ve bir başkasını değiştirin (Javascript kullanmadan)

cevap

İlgili konular