How to make the hover area in css larger

Question

I have a list in html that I format as a drop-down menu in CSS, however, when I hover over, only the first half of the text responds, unlike its entire length, and I can't figure out which property to change to make this hover area is longer.

thanks!

the code:

#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 stuff:

 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>' 

edit: implementation: http://jsfiddle.net/CLVwv/1/

Answer 1

The problem is that you set a negative margin on each ul .

Just remove the gasket from the .navbar and reduce the margin to get the required spacing.

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

You can also reduce your CSS by removing identifier tags and using the .navbar class, this will also make your code more flexible, since you do not need to add new CSS every time you want to add an item to the menu:

 .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> 

See http://jsfiddle.net/georeith/CLVwv/2/ for a working solution.

Answer 2

The reason this happens is because of the negative fields that you have on ul. ul # navbar2 cover # navbar1 and # navbar3 cover # navbar2.

Is there a reason why you need three separate ul? If you use the following html, the problem is resolved:

 <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> 

I added a 3px add-on to #navbar li:

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

See the script: http://jsfiddle.net/2wFjA/1/