1

将此 CSS 用于水平菜单：

如何使用主菜单栏（<nav>）使子菜单项 100%

nav {
    margin: 0 auto; 
    text-align: center;
}

nav ul ul {
    display: none;
}

nav ul li:hover > ul {
    display: block;
}

nav ul {
    list-style: none;
}

nav ul li {
    float: left;
}

nav ul li:hover a {
    color: #000000;
    margin-bottom:5px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

nav ul li a {
    display: block; 
    padding: 5px 15px;
    color: #000000;
    text-decoration: none;
}       

nav ul ul {
    border-radius: 0px;
    padding: 0;
    position: absolute;
}

nav ul ul li {
    float: none; 
    position: relative;
}

nav ul ul li a {
    color: #000000;
}

nav ul ul li a:hover {
    color: #666666;
}

nav ul ul ul {
    position: absolute;
    top:0;
}

这是一个 jsfiddle： http: //jsfiddle.net/9XLYE/ - 希望它有所帮助

谢谢

4

2 回答 2

3

不太难，我不应该想。您已经为自己提供了一个基本框架。您需要添加的只是：

nav {
    position: relative;
}
nav ul ul {
    left: 0;
    right: 0;
}

并且只要没有 的ul ul直接父级在它们上设置位置，它们的宽度就会从nav元素中读取。请记住，这nav自然是一个块级元素，所以如果你实现它，你ul ul的 s 本质上仍然是width: 100%。

于 2013-09-17T02:18:33.773 回答
2

您可以通过使每个子菜单的位置相对于父级相对父级（菜单包装 div）的绝对位置来实现这一点。

检查这个：http: //jsfiddle.net/gespinha/9XLYE/4/

nav {
    margin: 0 auto;
    text-align: center;
}
nav ul ul {
    display: none;
    width:100%;
    position:absolute;
    left:0;
}
nav ul li:hover > ul {
    display: block;
}
nav ul {
    list-style: none;
    position:relative;
}
nav ul li {
    float: left;
}
nav ul li:hover a {
    color: #000000;
    margin-bottom:5px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}
nav ul li a {
    display: block;
    padding: 5px 15px;
    color: #000000;
    text-decoration: none;
}
nav ul ul {
    border-radius: 0px;
    padding: 0;
    position: absolute;
}
nav ul ul li {
    float: none;
    position: relative;
}
nav ul ul li a {
    color: #000000;
}
nav ul ul li a:hover {
    color: #666666;
}
nav ul ul ul {
    position: absolute;
    top:0;
}
于 2013-09-17T02:17:17.333 回答