如何创建浮动下拉菜单?

时间:2013-07-06 17:17:49

标签: html css3

我想将下拉菜单浮动到其他项目上。但是下面的代码显示了下拉菜单,但下拉菜单位于项目下方。我使用过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>

1 个答案:

答案 0 :(得分:0)

所以,听起来你遇到的问题是下拉菜单(或打开)下拉菜单会显示在屏幕上比主菜单更低的元素后面。是吗?

确保您的菜单父级既有位置值又有z-index值,并且还要确保您希望菜单显示在顶部的对象也具有位置值。如果想要彻底,也可以为它们分配z索引。