HTML，下拉菜单上的悬停效果答案

【问题标题】：HTML, hovering effect on drop down menusHTML，下拉菜单上的悬停效果
【发布时间】：2012-02-13 21:04:18
【问题描述】：

我有一个通过列表创建的菜单，并且需要它与用户的交互性更强。

<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;

当我太早接近菜单时，我还注意到闪烁。我该如何解决这个问题？

【问题讨论】：

您的 html 无效。这可能是一个错字，但您正在关闭 <a>，而 </li> 和 </ul> 丢失。另外，你能放一个jsfiddle吗？这会很有帮助。
这里有一些关于 CSS 菜单的想法，因为您似乎是新手：stackoverflow.com/a/2188851/1182904

标签： html css menu

【解决方案1】：

您先声明position: absolute，然后再声明float: left，这没有任何意义，而且您的html 像cmets 中所说的那样无效。
过早接近菜单时闪烁是因为<ul> 默认为display: block，它将扩展到其容器的大小。要解决这个问题，您可以像您一样使用float: left，或使用display: inline-block 将菜单包含在其边界内。这个例子应该可以工作：

html：

<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>

css：

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

示例：

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

【讨论】：