html - 使用 div 的级联菜单

Question

我将使用 div 创建一个级联菜单s，例如当 <a>悬停另一个 div 显示:

我可以用 li 创建它和 ul但想用 div 来做.

我的问题: 当鼠标指针位于 <a> 上时div显示但是当鼠标指针来到 div 时, div将消失 ( display:none; )

this is my demo

<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

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 .我认为这样看起来更好，并且与大多数网站的行为一样。