9

我在 html 中有一个列表，我将其格式化为 CSS 中的下拉菜单，但是，当我将鼠标悬停在上面时，只有文本的前半部分在响应，而不是整个长度，我想不出找出要更改的属性以使此悬停区域更长。

谢谢！

代码：

#navbar {
    position: relative;
    margin: 10px;
    margin-left: -27px;
    /*height: 13px; */
    float: left;
}

#navbar li {
    list-style: none;
    float: left; 
}

#navbar li a {
    display: block;
    padding: 3px 8px;
    background-color: #00AA63;
    color: #fff;
    text-decoration: none; 
}

#navbar li ul {
    color: #fff;
    display: none; 
    width: 10em;
}

#navbar li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; 
    /*width: 200%;*/
}

#navbar li:hover li {
    float: none; 
    /*width: 200%;*/
}

#navbar li:hover li a {
    background-color: #00AA63;
    color: #fff;
    border-bottom: 1px solid #fff;
    color: #fff; 
}

#navbar li li a:hover {
    color: #fff;
    background-color: #33BB96; 
}

jQuery的东西：

document.getElementById("menu").innerHTML += '<ul id="navbar">'
    + '<li><a href="#">other electives</a>'
    +   '<ul id="navbar">'
    +       '<li><a href="#">Subitem One</a></li>'
    +       '<li><a href="#">Second Subitem</a></li>'
    +       '<li><a href="#">Numero Tres</a></li></ul>'
    + '</li>'

编辑：实现：http: //jsfiddle.net/CLVwv/1/

4

2 回答 2

5

问题是因为您在每个ul.

只需从中删除填充.navbar并减少边距即可获得所需的间距。

.navbar {
    position: relative;
    margin: 10px 1px;
    /*height: 13px; */
    float: left;
    padding-left: 0px;
}

您还可以通过删除 ID 标签和使用.navbar类来减少 CSS，这也将使您的代码更加灵活，因为您不必在每次希望将项目添加到菜单时添加任何新的 CSS：

.navbar {
    position: relative;
    margin: 10px 1px;
    /*height: 13px; */
    float: left;
    padding-left: 0px;
}

.navbar li {
    list-style: none;
    overflow: hidden;
}


.navbar li a {
    display: block;
    padding: 3px 8px;
    background-color: #00AA63;
    color: #fff;
    text-decoration: none; 
}

.navbar li ul {
    color: #fff;
    display: none; 
    width: 10em;

}

.navbar li:hover ul {
    display: block;
    position: absolute;
    margin: 0;
    padding: 0; 
    /*width: 200%;*/
}

.navbar li:hover li {
    float: none; 
    /*width: 200%;*/
}

.navbar li:hover li a {
    background-color: #00AA63;
    color: #fff;
    border-bottom: 1px solid #fff;
    color: #fff; 
}

.navbar li li a:hover {
    color: #fff;
    background-color: #33BB96; 
}

HTML：

<ul class="navbar">
    <li><a href="#">other electives</a>
       <ul class="navbar">
           <li><a href="#">Subitem One</a></li>
           <li><a href="#">Second Subitem</a></li>
           <li><a href="#">Numero Tres</a></li></ul>
    </li>
</ul>
<ul class="navbar">
    <li><a href="#">other electivesother electives</a>
       <ul class="navbar">
           <li><a href="#">Subitem One</a></li>
           <li><a href="#">Second Subitem</a></li>
           <li><a href="#">Numero Tres</a></li></ul>
    </li>
</ul>
<ul class="navbar">
    <li><a href="#">other electives</a>
       <ul class="navbar">
           <li><a href="#">Subitem One</a></li>
           <li><a href="#">Second Subitem</a></li>
           <li><a href="#">Numero Tres</a></li></ul>
    </li>
</ul>

有关可行的解决方案，请参阅http://jsfiddle.net/georeith/CLVwv/2/。

于 2013-03-18T22:21:08.657 回答
3

发生这种情况的原因是您在 ul 上的负边距。ul#navbar2 覆盖#navbar1，#navbar3 覆盖#navbar2。

您需要三个单独的 ul 是否有理由？如果您使用以下 html，则问题已解决：

<ul id="navbar">
    <li><a href="#">other electives</a>
       <ul class="navbar">
           <li><a href="#">Subitem One</a></li>
           <li><a href="#">Second Subitem</a></li>
           <li><a href="#">Numero Tres</a></li></ul>
    </li>

    <li><a href="#">other electivesother electives</a>
       <ul class="navbar">
           <li><a href="#">Subitem One</a></li>
           <li><a href="#">Second Subitem</a></li>
           <li><a href="#">Numero Tres</a></li></ul>
    </li>

    <li><a href="#">other electives</a>
       <ul class="navbar">
           <li><a href="#">Subitem One</a></li>
           <li><a href="#">Second Subitem</a></li>
           <li><a href="#">Numero Tres</a></li></ul>
    </li>
</ul>

我还在#navbar li 中添加了一个 3px 的填充：

#navbar li {
    list-style: none;
    float: left; 
    padding-right: 3px;
}

见小提琴：http: //jsfiddle.net/2wFjA/1/

于 2013-03-18T22:18:03.490 回答