Question

将此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/ - 希望它有所帮助

感谢

Answer 1

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

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

只要ul ul的直接父母都没有设置位置，他们的宽度就会从nav元素读取。请记住，nav自然是块级元素，因此如果您实现了这一点，那么ul ul仍将是width: 100%。

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

使菜单栏的css子菜单全宽

2 个答案: