我在html中有一個列表,我將其格式化爲CSS中的下拉菜單,但是,當我將鼠標懸停時,只有文本的前半部分響應反對它的整個長度,並且我無法弄清楚爲了使這個懸停區域更長而改變哪個屬性。如何使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/
請分享您的代碼,或者更好的做法是讓http://jsfiddle.net/複製您的問題。 – 2013-03-18 21:43:51
無代碼=無幫助! – 2013-03-18 21:44:02
對不起,第一次在這裏問一個問題,代碼現在在這裏! – TheLaurens 2013-03-18 21:47:23