Я новичок в CSS и раньше пытался решить многие проблемы, связанные с этим вопросом, но я думаю, что моя проблема может быть с чем-то скрывающим мои выпадающие меню. Я также пробовал многие из z-index-решений безрезультатно. Я также использую iframe для отображения того, что пользователь нажимает на той же странице. Я знаю, что эта часть работает до сих пор, но не имеет понятия, почему мои меню не показывают. Я старался держать его как можно проще. Я буду беспокоиться о дизайне позже. Jsfiddle:
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>
И вы также можете добавить положение: абсолютное к вашему внутреннему меню ul, чтобы он мог рисовать выше всего остального.
ul li:hover > ul {
display: block;
position: absolute;
}
Проверьте скрипку здесь http://jsfiddle.net/8Xu7E/3/ (Это настройка только для первого пункта меню, пока)
Обновленная скрипка с каждым рабочим меню: http://jsfiddle.net/8Xu7E/5/