Question

我正面临一个关于需要压下身体内容的横向子菜单的问题。但我没有得到它。我用不同的CSS尝试过一些东西。我希望使用CSS完成，因为它将是一个100％div的响应式菜单。所以我不能在sub ul中给出任何像素宽度。我几乎已经完成了它，但当我将鼠标悬停在主菜单上时，主菜单被推下来了。我知道可能有一个使用CSS代码的解决方案，如果有人能帮助我解决这个问题会很棒。如果它不能用CSS完成，那么我想知道是否有任何jquery解决方案。在这里，我将与HTML共享我的CSS。

“”在给定的css和html中有3个菜单，你也可以在jsfiddle链接中看到它，菜单1和菜单2子菜单以及Body Content被推下，但菜单3工作正常。我想修改菜单1和菜单2，就像菜单3一样。“”

任何帮助都将不胜感激。

谢谢，罗伊

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/

添加适当的宽度并浮动到main（li）列表项和子列表（ul）。

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

水平子菜单问题

1 个答案: