How do you make the area of hover in css larger - css

Question

I have a list in html that I am formatting as a drop down menu in CSS, however, when I hover over, only the first half of the text is responding, as opposed to the entire length of it, and I can't figure out which property to change in order to make this hover area longer.
thanks!
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>other electives'
+ '<ul id="navbar">'
+ '<li>Subitem One</li>'
+ '<li>Second Subitem</li>'
+ '<li>Numero Tres</li></ul>'
+ '</li>'
edit:
implementation:
http://jsfiddle.net/CLVwv/1/

Answer 1

The problem is because you have set negative margin on each ul.
Just remove the padding from .navbar and reduce the margin to get the spacing you desire.
.navbar {
position: relative;
margin: 10px 1px;
/*height: 13px; */
float: left;
padding-left: 0px;
}
You can also reduce your CSS by removing the ID tags and using a .navbar class, this will also make your code more flexible as you don't have to add any new CSS each time you wish 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>other electives
<ul class="navbar">
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
</ul>
<ul class="navbar">
<li>other electivesother electives
<ul class="navbar">
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
</ul>
<ul class="navbar">
<li>other electives
<ul class="navbar">
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
</ul>
See http://jsfiddle.net/georeith/CLVwv/2/ for a working solution.

Answer 2

The reason that's happening is because of the negative margins you have on the ul's. ul#navbar2 is covering #navbar1 and #navbar3 is covering #navbar2.
Is there a reason you need three seperate ul's? If you use the following html the issue is resolved:
<ul id="navbar">
<li>other electives
<ul class="navbar">
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
<li>other electivesother electives
<ul class="navbar">
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
<li>other electives
<ul class="navbar">
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
</ul>
I also added a 3px padding to #navbar li:
#navbar li {
list-style: none;
float: left;
padding-right: 3px;
}
See the fiddle: http://jsfiddle.net/2wFjA/1/