0

这是我的 CSS 规则

<style type="text/css">
#navigation2 {

    font: 0.80em Arial, Helvetica, sans-serif;
    width:100%;
}

#navigation2 ul {
    margin:0; 
    padding:0;
    background-color:transparent;
}

#navigation2 li {
    list-style: none;
    background:#fff;
}

ul.top-category{
    display:none;   
}

ul.top-category li {
    border: #6092bc solid;
    border-width: 1px;
    margin-top:1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#navigation2 a {
 color: #265d8c;
 cursor: pointer;
 display:block;                 
 text-decoration:none;
 margin-left:3%;
 margin-top:5%;
 margin-bottom:5%;
 width:100%;
}

#navigation2 li:hover {
 background: #ebf2f6;
 position: relative;
}

a.all-categories:hover ul.top-category{
     display:block;
}
</style>

这是我的html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <a  href="#" class="all-categories" >  All Categories </a> 

                    <div id="navigation2">

                       <ul class="top-category">
                          <li><a href="#">Kategori1</a></li>
                          <li><a href="#">Kategori2</a></li>
                          <li><a href="#">Kategori3</a></li>
                          <li><a href="#">Kategori4</a></li>
                          <li><a href="#">Kategori5</a></li>
                       </ul>
                    </div> 
</body>
</html>

我有一个 CSS 菜单，它在display:block. 我希望当鼠标悬停在链接上时菜单会打开，但我无法做出任何反应。你能解释一下我错过了什么吗？谢谢你的建议..

4

1 回答 1

1

试试这个http://jsfiddle.net/yf4W8/4/

你的问题在于这条线

a.all-categories:hover ul.top-category{
     display:block;
}

这意味着 UL 是您的链接元素的子元素，但事实并非如此

a.all-categories:hover + #navigation2 ul.top-category{
     display:block;
}

+用于选择#navigation2，这是您的链接的兄弟，然后我们选择 ，ul因为它是 的孩子#navigation2。如果你想进一步了解 CSS 选择器，你可能想看看这个列表。

通过更改代码以匹配上述内容，您将选择子菜单父容器并正确应用悬停样式

于 2012-08-26T19:35:29.247 回答