How do you make the area of hover in css larger

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