我有一个通过列表创建的菜单,需要它与用户更加互动。
<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;
当我有点过早地接近菜单时,我注意到了一个闪烁。 我该如何解决这个问题?
答案 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}}
示例:强>