懸停一個元素，並更改另一個元素（不使用Javascript）

我有一個嵌套的CSS菜單，我無法獲得子菜單。懸停一個元素，並更改另一個元素（不使用Javascript）

我從A list apart的代碼。該網站上的示例非常好，但由於我的頁面上有2個CSS導航菜單，因此必須將我的HTML元素放入不同的CSS類中。

這裏是我的代碼：

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

現在，當我將鼠標懸停在「A」上的1級，2級的「UL」不會來了。有人可以擺脫一些光？我可能會錯過一些明顯的東西。謝謝！

來源

2011-10-20 Arlington

您必須更改您的CSS選擇器才能鎖定lvl2 <ul>，因爲它不再嵌套（它是兄弟姐妹，所以請使用+）。

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

你應該閱讀這 list of css selectors。

或類似的變化，你可以移動的LVL1 <li>懸停，而不是錨

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

來源

2011-10-20 07:45:19

瀏覽支持選擇。如果你需要支持IE6，那麼不要這樣做。 –

+49

可憐那個還需要支持ie6的人！ – Jawad

懸停一個元素，並更改另一個元素（不使用Javascript）

回答

相關問題