Question

这是我的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时完美运行。我希望当鼠标悬停在链接上时菜单会打开，但我不能给出任何反应。可以解释我所缺少的内容。谢谢你的建议..

Answer 1

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

你的问题在于这一行

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

这意味着UL是您的link元素的子元素，而不是

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

+用于选择#navigation2，这是您链接的兄弟，然后我们选择ul，因为它是{的孩子{ {1}}。如果您想进一步阅读CSS选择器，您可能需要查看this list。

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

当鼠标悬停在链接上时，不显示Css菜单

1 个答案: