我是 CSS 的新手,之前已经尝试过针对这个问题提供的许多解决方案,但我认为我的问题可能出在隐藏下拉菜单的东西上。我也尝试了很多 z-index 解决方案都无济于事。我还使用 iframe 来显示用户在同一页面中单击的任何内容。我知道到目前为止该部分有效,但不知道为什么我的菜单不显示。我试图让它尽可能简单。稍后我会担心设计。 fiddle 手:
body {
background-color:#FFFFFF;
}
a:visited {
color:orange;
}
#wrapper {
width:900px; margin:0px auto; background-color:#EEEEEE;
}
#top { width:100%; background-color:black; overflow:hidden;
}
#logo { float:left; margin: 0 0 0 10px;
}
#socialmedia { float:right; padding:0 10px 0 0;
}
#socialmedia img {
height:24px; width:24px;
}
#socialmedia p {
color:white;
}
#topnav { clear:both; background-color:#444444;
padding-top:0.001em;
padding-bottom:0.001em;
}
#content {
background-color:red; width:100%; padding-top:0.001em;
height:700px;
}
/*menu*/
ul li{
display:inline-block;
}
ul ul {
display:none;
}
ul li:hover > ul {
display: block;
}
/*iframe same size as content div*/
iframe {
width:100%;
height:100%;
}
最佳答案
您需要将内部菜单插入到父“li”标签中,这样它看起来像这样:
<ul>Main menu
<li>Dropdown menu
<ul>
<li>Dropdown child</li>
</ul>
</li>
</ul>
现在你有这个:
<ul>Main menu
<li>Dropdown menu</li>
<ul>
<li>Dropdown child</li>
</ul>
</ul>
您还可以将 position: absolute 添加到您的内部 ul 菜单中,这样它就可以绘制在其他所有内容之上。
ul li:hover > ul {
display: block;
position: absolute;
}
在这里检查 fiddle http://jsfiddle.net/8Xu7E/3/ (目前仅针对第一个菜单项设置)
更新了每个菜单工作的 fiddle :http://jsfiddle.net/8Xu7E/5/
关于jquery - CSS 下拉菜单、z-index、iframe 有问题吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23102005/