CSS 下拉菜单主选项卡障碍

Question

我一直在构建 CSS 下拉菜单，但我遇到了一些小问题，想知道是否有人可以帮我解决这个问题。 我有一个菜单有这个 HTML

<div id="menu">
<ul>
<li><a class="active" href="#">Home</a>
<ul class="sub-menu">
<li><a href="#">This is sub</a></li>
<li><a href="#">sub menu item</a></li>
<li><a href="#">This is a long sub menu item</a></li>
</ul>
</li>  
<li><a href="#">Location</a></li>
<li><a href="#">another link</a></li>
</ul>
</div>

目前，当我在主<li> 'Home' 上 hover 时，它的宽度扩大了很多，我认为可以容纳我拥有的子类菜单。 我怎样才能阻止这种情况发生？ 要实现以下目标：

|首页| // 漂亮的短主标签
|子菜单链接 |
|另一个子菜单链接|

与目前正在发生的情况相反（请原谅我的图表的粗略）

|首页........| // 真的很长搞砸了所有选项卡
|子菜单链接 |
|另一个子菜单链接|

这是菜单的 CSS 代码：

#menu ul {
margin: 0;
list-style: none;
padding: 0 0 0 20px;
position: relative;
z-index: 40;
}
#menu ul li {
float: left;
padding: 10px 10px 13px 0;
position: relative;
z-index: 50;
}
#menu li a {
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;

Answer 1

我有基本相同的标记，所以下面的代码应该可以很好地满足你的需要。

我留下了所有的颜色和图像信息，以防你也需要帮助。

#menu {
    background: none repeat scroll 0 0 #333333;
    border: 0 none;
    font: bold 14px "Lucida Sans Unicode","Bitstream Vera Sans","Trebuchet Unicode MS","Lucida Grande",Verdana,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
}
#menu ul {
    background: none repeat scroll 0 0 #333333;
    height: 35px;
    list-style: none outside none;
    margin: 0 0 3px;
    padding: 0;
    width: 100%;
}
#menu li {
    float: left;
    padding: 0;
}
#menu li a {
    background: no-repeat scroll right bottom #333333;
    color: #CCCCCC;
    display: block;
    font-weight: normal;
    line-height: 35px;
    margin: 0;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
}
#menu li a:hover, #menu ul li:hover a {
    background: no-repeat scroll center bottom #2580A2;
    color: #FFFFFF;
    text-decoration: none;
}
#menu li ul {
    background: none repeat scroll 0 0 #333333;
    border: 0 none;
    display: none;
    height: auto;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 225px;
    z-index: 200;
}
#menu li:hover ul {
    display: block;
}
#menu li li {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    width: 225px;
}
#menu li:hover li a {
    background: none repeat scroll 0 0 transparent;
}
#menu li ul a {
    display: block;
    font-size: 12px;
    font-style: normal;
    height: 35px;
    margin: 0;
    padding: 0 10px 0 15px;
    text-align: left;
}
#menu li ul a:hover, #menu li ul li:hover a {
    background: no-repeat scroll left center #2580A2;
    border: 0 none;
    color: #FFFFFF;
    text-decoration: none;
}

Answer 2

标记是奇怪的人。

首先，尝试将它的结构比将主链接的 <a> 与另一个 <ul> 放在同一个 <li> 中更好一些。 此链接可以在单独的 <li> 中吗？

另外，不要将菜单包装在 <div> 中。 只需将样式直接应用于父 <ul>。