CSS下拉菜单，z-index，iframe的问题？

Question

我是CSS的新手，以前曾尝试过针对此问题提供的许多解决方案，但我认为我的问题可能是隐藏了下拉菜单。 我也尝试了许多z-index解决方案，但无济于事。 我还使用iframe来显示用户在同一页面上单击的内容。 我知道到目前为止该部分仍然有效，但是不知道为什么菜单不显示。 我试图使它尽可能简单。 我稍后会担心设计。 Jsfiddle：

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>

您还可以在内部ul菜单中添加position：absolute，这样它就可以在其他所有内容之上绘制。

ul li:hover > ul {
        display: block;
        position: absolute; 

    }

在此处检查小提琴http://jsfiddle.net/8Xu7E/3/ （目前仅设置为第一个菜单项）

更新了带有所有菜单的小提琴： http : //jsfiddle.net/8Xu7E/5/