Forcing Hover Effect to Fill Containing Div

[ncpilgrim]

Hi there,

I am trying to setup a small drop down menu in the top right hand corner of my page. My problem is getting the hover effect to fill the containing div. I have used advice found elsewhere on the Net to use display: block, but this just results in the 3 menus to appear stacked top to bottom. What's ironic is that if you look at the menus above here on WebmasterWorld (the one with Home/ForumsIndex/Browser Side World), it has the behavior I am trying to fix.

Friend forever for some advice!

Thanks

<div id="appHeader">
Other stuff blah blah blah
<div id="appHeaderMenu">
<a href="defaultB.aspx">Home</a>
<a href="defaultB.aspx">Preferences</a>
<a href="defaultB.aspx">Help</a>
</div>
</dv>

#appHeader
{
padding-bottom: 5px;
padding: 5px 5px 5px 0;
background-color: #99FFFF;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 15px;
font-size: small;

}

#appHeaderMenu
{
float: right;
display: inline;
}

#appHeaderMenu a
{
color:black;
text-decoration: none;
padding-left: 5px;
padding-right: 5px;
width: 100%;
height: 100%;

}

#appHeaderMenu a:hover
{
text-decoration:none;
background-color: #CDC9B4;

}

[Marshall]

You may want to try a <ul> having it dislay:inline and have li a:hover display:block.

Marshall

[ncpilgrim]

This addressed it. I structured my menus into lists with ul and il tags and things seem to be working.

Thanks!

[Marshall]

You're welcome. Glad it worked for you.

Marshall