How do I expand the selectable area of a drop down menu within css?

[Brian Connelly]

HEllo,
I am working on a project for a friend and have created a horizontal navigation menu. It works well, but when the lists drop down I want to make the entire view selectable and not just over the displayed text. I attached a png photo that highlights what happens when the mouse hovers over the dropdown. I want the entire dropdown area to highlight as to be able to be selected. Can you help dear reader?
Here is also my navigation code:

#nav
{    
    margin-left:30px;
    font-size:8px;
    background-color:#BABABA;
    height:15px;
    width:93%
}
#nav li
{    position:relative;
    float:left;
    width:85px;
    height:10px;
    background-color:#BABABA;
    border-right: 3px solid #625663;
    border-bottom:2px solid #625663;
    margin-top:1px;
 
}
#nav li ul
{/*hide the submenus from display*/
 display:none;
}
#nav li:hover a
{
    background-color:#A5A0A8;
    font-weight:bold;
    color:White;
}
#nav li:hover ul
{
    display:inline;
    width:auto;
    height:auto;
    margin-top:1px;
    background-color:#A590A8;
    float:left;
    text-align:left;
    line-height:10px;
}
#nav li:hover ul li
{
    margin-top:3px;
    overflow:hidden;
    background-color:Transparent;
}
#nav li:hover ul li a
{
    background-color:Transparent;
}
#nav li:hover ul li a:hover
{
    background-color:#A2A4B8;
    display:block;
    margin:0; padding:0;
}

[JKing]

#nav li:hover a
{
    background-color:#A5A0A8;
    font-weight:bold;
    color:White;
    display:block;
}
 

By default anchors are inline elements and only take up as much space as necessary. Adding display:block; fixes this and expands the clickable area.

[Brian Connelly]

Thanks. That did the trick. What does inline do?

[JKing]

Inline elements take up only as much space as necessary and do not have line breaks before or after.