Question

我希望有人可以帮助我解决一直让我疯狂的CSS问题。我知道我在这里遗漏了一些明显的东西，我只是看不到它。如果你能提供帮助，我们将不胜感激。

这是小提琴http://jsfiddle.net/taglegacy/HK7Hy/

这是css：

body
{
    margin: 20;
    padding: 20;
    text-align: center;
    font: 85% arial, helvetica, sans-serif;
    background: #f1f1f1;
    color: #444;
}
#container
{
    text-align: left;
    margin: 0 auto;
    width: 700px;
    height: 400px;
    background: #FFF;
}
/*---NavigationBar---*/
ul
{
    font-family: Arial, Verdana;
    font-size: 14px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    background: #9b1b19;
}
ul li
{
    display: block;
    position: relative;
    float: left;
    border-right: 1px solid #fff;
}
li ul
{
    display: none;
    position:absolute;
    left:0;
}
ul li a
{
    display: block;
    text-decoration: none;
    color: #fff;
    padding: 5px 15px 5px 15px;
    background: #9b1b19;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover
{
    background: #af1f1c;
}
li:hover ul
{
    display: block;
    position: absolute;
    background: #af1f1c;
}
li:hover li
{
    float: none;
    font-size: 11px;
    background: #af1f1c;
    border-top: 1px solid #fff;
}
li:hover a
{
    background: #af1f1c;
}
    li:hover li a:hover
{
    background: #af1f1c;
}

这是HTML：

<body>
<div id="container">
<ul>
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a>
<ul>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Submenu 3</a></li>
</ul>
</li>
<li><a href="">Menu 3</a>
<ul>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Submenu 3</a></li>
<li><a href="">Submenu 4</a></li>
<li><a href="">Submenu 6</a></li>
</ul>
</li>
<li><a href="">Menu 4</a>
<ul>
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Really Long Submenu 3 Really Long</a></li>
</ul>
</li>
</ul>
</div>
</body>

Answer 1

“真正很长”的列表项目正在被切断，因为您的子菜单ul设置为其父级li的宽度。取出width: 100%，它会显示输入文字。

移动它，使其仅适用于父ul以保留导航栏宽度：

#topnav { width: 100% }

Fiddle

Answer 2

我认为第二次ul需要position:absolute。使用padding-top和/或top稍微玩一下。在示例中，padding-top等于主菜单项的高度。

ul#topnav > li > ul {position: absolute; top:0; left:0; padding-top:36px;}

应该工作，祝你好运！

css导航栏的子菜单问题

2 个答案: