css - 水平子菜单问题

Question

我遇到了一个需要下推正文内容的水平子菜单的问题。但我不明白。我用不同的 CSS 尝试了一些东西。我想使用 CSS 来完成，因为它将是一个具有 100% div 的响应式菜单。所以我不能在 sub ul 中给出任何像素宽度。我几乎完成了，但是当我将鼠标悬停在主菜单上时，主菜单被按下了。我知道可能有一个使用 CSS 代码的解决方案，如果有人可以帮助我解决这个问题，那就太好了。如果它不能用 CSS 完成，那么我想知道是否有任何 jquery 解决方案。在这里，我将与 HTML 一起分享我的 CSS。

“”给定的 css 和 html 中有 3 个菜单，您还可以在 jsfiddle 链接中看到它，菜单 1 和菜单 2 子菜单以及正文内容被下推，但菜单 3 工作正常。我想像修复菜单 3 一样修复菜单 1 和菜单 2。""

如有任何帮助，我们将不胜感激。

谢谢罗伊

HTML

<div id="menu">

    <ul id="nav">
    <li><a href="#">Menu 1</a>
    <ul>
    <li><a href="#">fdesfc</a></li>
    <li><a href="#">drgdrg</a></li>
    <li><a href="#">dgvdvg</a></li>
    </ul>
    </li>

    <li><a href="#">Menu 2</a>
    <ul>
    <li><a href="#">iuoluiouo</a></li>
    <li><a href="#">abcde</a></li>
    <li><a href="#">bhnhbnh</a></li>
    </ul>
    </li>

    <li><a href="#">Menu 3</a>
    <ul>
    <li><a href="#">Menu 3 Submenu item 1</a></li>
    <li><a href="#">Menu 3 Submenu item 2</a></li>
    <li><a href="#">Menu 3 Submenu item 3</a></li>
    </ul>
    </li>
    </ul>

</div>
<div class="clear"></div>
<div class="contArea">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

CSS

#menu{
width: 100%;
height: 40px;
clear: both;
}

ul#nav {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
background: #dc0000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}

ul#nav li {display: inline;}

ul#nav li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #880000;
margin: 0;
padding: 0 30px;
background: #dc0000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}

ul#nav ul {
display: none;
position: absolute;
}

ul#nav li:hover > ul {
position: relative;
display: block;
height: 45px;
margin: 40px 0 0 0;
background: #aa0000;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}

ul#nav li:hover > ul li a {
float: left;
font: bold 1.1em arial, verdana, tahoma, sans-serif;
line-height: 45px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #110000;
margin: 0;
padding: 0 30px 0 0;
background: #aa0000;
}

ul#nav li:hover > ul li a:hover {
color: #120000;
text-decoration: none;
text-shadow: none;
}

.clear {
clear: both;
}

.contArea {
    background: #ccc;
padding: 12px;
}

(在 JSFiddle 上:http://jsfiddle.net/indy12/QG9L5/1/)

Answer 1

我以为这就是你所期望的 http://jsfiddle.net/QG9L5/6/

向主(li)列表项和子列表(ul)添加适当的宽度和 float 。

    #menu {
    width: 100%;
    height: 40px;
    clear: both;
}
ul#nav {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #dc0000;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
}
ul#nav li {
    display: inline;
}
ul#nav li.main{
    float:left; width:150px;
}
ul#nav li a {
    float: left;
    font: bold 1.1em arial, verdana, tahoma, sans-serif;
    line-height: 40px;
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #880000;
    margin: 0;
    padding: 0 30px;
    background: #dc0000;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
}
ul#nav ul {
    display: none;
    position: absolute;
    width:500px;
}
ul#nav li:hover > ul {
    position: relative;
    display: block;
    height: 45px;
    margin: 40px 0 0 0;
    background: #aa0000;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
}
ul#nav li:hover > ul li a {
    float: left;
    font: bold 1.1em arial, verdana, tahoma, sans-serif;
    line-height: 45px;
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #110000;
    margin: 0;
    padding: 0 30px 0 0;
    background: #aa0000;
}
ul#nav li:hover > ul li a:hover {
    color: #120000;
    text-decoration: none;
    text-shadow: none;
}
.clear {
    clear: both;
}
.contArea {
    background: #ccc;
    padding: 12px;
}