jquery - CSS 下拉菜单、z-index、iframe 有问题吗？

Question

我是 CSS 的新手，之前已经尝试过针对这个问题提供的许多解决方案，但我认为我的问题可能出在隐藏下拉菜单的东西上。我也尝试了很多 z-index 解决方案都无济于事。我还使用 iframe 来显示用户在同一页面中单击的任何内容。我知道到目前为止该部分有效，但不知道为什么我的菜单不显示。我试图让它尽可能简单。稍后我会担心设计。 fiddle 手:

http://jsfiddle.net/8Xu7E/1/

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

Answer 1

您需要将内部菜单插入到父“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/