html - 如何创建浮动下拉菜单？

Question

我想将下拉菜单浮动在其他项目上。但下面的代码显示了下拉菜单，但下拉菜单位于项目下方。我使用了 z 索引，但对我来说效果不佳。可能是 z 索引的错误执行。

 <style type="text/css">
li.css3videos ul {display: none;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}

</style>

<div id="css3navigation" style="position:absolute;top:119px;">
<nav id="css3mainnav">        <ol>
<li class="css3videos"><a href="http://www.tolly2day.com/video/">Videos</a>
<ul>
<li><a href="#">Trailers</a></li>
 <li><a href="#">Movies</a></li>
 </ul>
 </li>

Answer 1

因此，听起来您遇到的问题是下拉菜单在下拉（或打开）时显示在屏幕上物理低于主菜单的元素后面。那正确吗？

确保您的菜单父级同时具有位置值和 z-index 值，并且还要确保您希望菜单出现在顶部的对象也具有位置值。如果你想彻底，你也可以为它们分配 z-indexes。