悬停一个元素，并更改另一个元素（不使用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）

回答

相关问题