你如何使css中的悬停区域更大

Question

我在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/

Answer 1

问题是因为你已经为每个设置了负余量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/.