Problemer med Css dropdown menu
HejJeg har en css dropdown menu. Den virker fint nok, problemet er bare, at min header kun er 155px, så menuen kan ikke blive højere end den, og jeg vil gerne have en der ikke er begrænset af dens parent div. Så jeg bliver nød til, at lave den popup til absolute position. Det virker også fint nok, problemet er bare, at dens bredde bliver kommer til, at fylde resten af siden. Og selvom jeg sætter en width på, så fylder den stadig det hele.
/* USER MENU
----------------------------------------------------------*/
div#usermenu
{
font-weight: bold;
z-index: 1;
}
div.usermenu-topmenu
{
float: left;
}
div.usermenu-popup
{
position: absolute;
top: 25px;
z-index: 1;
}
div.usermenu-popup a
{
color: #c9a218;
}
div.usermenu-popup a:hover
{
background-color: #666666;
}
div.usermenu-topmenu:hover div:first-child
{
border-bottom: none;
}
div.usermenu-topmenu div.usermenu-popup
{
display: none;
}
div.usermenu-topmenu:hover div.usermenu-popup
{
display: block;
margin-left: 1px;
float: none;
background: #2a2a2a;
border-bottom: 1px solid #666666;
border-right: 1px solid #666666;
}
div.usermenu-popup div, div.usermenu-popup a
{
display: block;
text-decoration: none;
margin: 3px;
}
div.usermenu-popup div + div, div.usermenu-popup a + a
{
margin-top: 10px;
}
<div id="usermenu">
<div class="usermenu-topmenu">
<div style="height: 37px; background: url('../Images/TopMenu-Background.jpg') repeat-x;">
<a href="/Account/Register" style="margin: 12px 20px 0px 20px; float: left;">
<img alt="register" src="../Images/Myaccount-off.png" onmouseover="this.src = '../Images/Myaccount-on.png'"
onmouseout="this.src = '../Images/Myaccount-off.png'" style="border: none; float: none;" /></a>
</div>
<div class="usermenu-popup">
<a href="/Account/ChangePassword">Change password</a> <a href="#">Settings</a> <a
href="/Account/LogOff">Log out</a>
</div>
</div>
</div>
Nogen der ved hvordan jeg kan løse dette?
