Html 当鼠标位于链接上方时，Css菜单不显示_Html_Css

Html 当鼠标位于链接上方时，Css菜单不显示

html css

Html 当鼠标位于链接上方时，Css菜单不显示,html,css,Html,Css,这是我的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;

这是我的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>


#导航2{
字体：0.80em Arial，Helvetica，无衬线；
宽度：100%；
}
#导航2 ul{
保证金：0；
填充：0；
背景色：透明；
}
#航行2里{
列表样式：无；
背景：#fff；
}
顶级{
显示：无；
}
ul.top-category li{
边框：#6092bc实心；
边框宽度：1px；
页边顶部：1px；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
#导航2 a{
颜色：265d8c；
光标：指针；
显示：块；
文字装饰：无；
左缘：3%；
利润率最高：5%；
利润底部：5%；
宽度：100%；
}
#导航二：悬停{
背景：#ebf2f6；
位置：相对位置；
}
a、 所有类别：悬停ul。顶级类别{
显示：块；
}

这是我的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

时可以完美运行。我希望当鼠标悬停在链接上时菜单会打开，但我无法做出任何反应。你能解释一下我遗漏了什么吗。谢谢你的建议。

试试这个

你的问题在于这条线

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

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

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

用于选择

#navigation2

，它是链接的同级，然后我们选择
ul
，因为它是
#navigation2
的子级。如果你想进一步阅读CSS选择器，你可能想看看

通过更改代码以匹配上述内容，您将选择子菜单父容器并正确应用悬停样式
下次添加JSFIDLE时，对不起，我对这些内容不熟悉。也感谢JSFIDLE，但现在，当我移动鼠标单击时，它消失得太快了。我猜链接和菜单之间有一个空格。这是问题吗？这里的问题是，下拉菜单设置为仅当鼠标悬停在链接上时才显示。我做了一点小小的改变，将这两个元素包装在一个新容器中，并将悬停样式应用于该元素。这将起作用，因为即使链接失去焦点并且您将鼠标悬停在下拉列表上，您仍然在父容器中