HTML,悬停对下拉菜单的影响

时间:2012-02-13 21:04:18

标签: html css menu

我有一个通过列表创建的菜单,需要它与用户更加互动。

<ul class="baked">
<li>
    <a href="P.html">P</li>
    <ul>
        <li><a href="R.html">R</a></li>
        <li><a href="P.html">P</a></li>
        <li><a href="N.html">N</a></li>
        <li><a href="U.html">U</a></li>
        <li><a href="T.html">T</a></li>
    </ul>
</li> 

我希望此菜单是一个下拉菜单,当通过悬停输入主菜单时,会打开一个头和三个附加选项。

和css:

ul.baked{margin-top: -140px;
    position: absolute;
          float: left;}           

ul.baked:hover{background:silver;
          width: 200px;
          height: 200px;
          border-radius: 4pt;
          border: 1px solid #000;

          box-shadow: inset 0px 6px 5px -2px #657;

当我有点过早地接近菜单时,我注意到了一个闪烁。 我该如何解决这个问题?

1 个答案:

答案 0 :(得分:2)

您宣布position: absolute然后float: left没有任何意义,而且您的HTML无效,就像评论中所说的那样。
过早接近菜单时闪烁是因为<ul>默认为display: block,它将扩展到其容器的大小。要解决此问题,您可以像使用float: left一样使用display: inline-block<ul class="baked"> <li> <a href="P.html">Menu</a> <ul> <li><a href="R.html">One</a></li> <li><a href="P.html">Two</a></li> <li><a href="N.html">Three</a></li> <li><a href="U.html">Four</a></li> <li><a href="T.html">Five</a></li> </ul> </li> </ul> 将菜单包含在其边界内。这个例子应该有效:

<强> HTML:

.baked { float: left; }
.baked li ul {
    position: absolute;
    background: red;
    display: none;
}
.baked li:hover ul { display: block; }

<强>的CSS:

{{1}}

示例:

http://jsfiddle.net/elclanrs/7GENy/