Question

我将创建一个包含div s的级联菜单，例如当<a>悬停另一个div显示时：

我可以使用li和ul创建它，但希望使用div进行创建。

我的问题：当鼠标指针在<a>上时div显示，但当鼠标指针到达div时，div将消失（ display:none;）

<div id="topDiv">
<img src="http://www.balit.ir/kgl/pic/user/logo.png" id="logo"/>
<div id="rightTopMenu">
   <a href="about.html">About KGL
    <div class="hoverMenuDiv">
        <a href="#">About Samuel</a>
        <a href="#">About Hoshange</a>
        <a href="#">About GhochAli</a>
    </div>
   </a> 
   <a href="Contact.html">Contact KGL</a>
   <a href="http://www.balit.ir/kgl">KGL Website</a>
   <a href="#">KGL Gallery</a>
</div>

我的CSS：

    body{
    margin:0;
}

#topDiv{
    position:absolute;
    background: black;
}

#logo{
    width:65px;
    height:auto;
    margin-left:40px;
}

#rightTopMenu{
    float:right;
    margin-top:20px;
}

#rightTopMenu a{
    position:relative;
   color: white;
    display: inline-block;
    text-align: center;
    text-decoration:none;
    width: 103px;
}

.hoverMenuDiv{
    position:absolute;
    top:40px;
    background:#CAD20E;
    display:none;
    text-align:center;
    width:130px;
}

#rightTopMenu a:hover, #rightTopMenu a:focus{
    color:#CAD20E;
}

#rightTopMenu a:hover+.hoverMenuDiv{
    display:block;
}

Answer 1

当用户在菜单内时，你必须添加它。

.hoverMenuDiv:hover{
    display:block;
}

还会从此课程top

中删除.hoverMenuDiv

fiddle

Answer 2

<强> JSFiddle

在CSS中，您需要

.hoverMenuDiv:hover{
    display:block;
}

这可以确保当您将鼠标悬停在div上时，它会一直停留在那里。

另外，在我的JSFiddle中，我已经将你的HTML放到了这个：

<a href="about.html">About KGL</a> 
<div class="hoverMenuDiv">
  <a href="#">About Samuel</a>
  <a href="#">About Hoshange</a>
  <a href="#">About GhochAli</a>
</div>

您在<a>中无法拥有<a>个标签。

以下是完成上一项工作的第二个JSFiddle，同时还删除了top中的.hoverMenuTop。我认为这种方式看起来更好，并且表现出大多数网站的行为。

Answer 3

此选择器过于宽泛。它针对你的所有锚点。

#rightTopMenu a { ... }

您只需选择直接孩子：

#rightTopMenu > a {

另外，请考虑使用无序列表作为菜单容器，而不是嵌套的A-tags。

请参阅：http://www.dhtmlgoodies.com/?whichScript=dhtmlgoodies_menu3

Answer 4

考虑使用'＆gt;'选择器而不是'+'选择器，如下所示：

#rightTopMenu:hover>.hoverMenuDiv{
    display:block;
}

'+'选择器用于查找后续标签，但.hoverMenuDiv实际上是#rightTopMenu的子标签。

有关此问题的快速参考，请参阅w3 schools。

使用div的级联菜单

4 个答案: