Drop-down with CSS

Question

I got a reallly simple drop-down menu but got a problem with the submenus width.

See it here: http://dl.dropbox.com/u/70953/SOSfrontpage.html

My HTML is:

<div id="navigation">
<div id="menu-dropdown">
    <ul class="menu">
     <li class="menu_punkt"><a href="http://itu.dk/people/lfel/Web-kodning/SOSfrontpage.html"&gt;Frontpage&lt;/a&gt;&lt;/li&gt;
        <li class="menu_punkt"><a href="http://itu.dk/hvem_er_vi_menu/hvem_er_vi.html"&gt;Who are we?</a></li>
     <li class="menu_punkt"><a href="http://itu.dk/oplev_sos_menu/oplev_sos.html"&gt;This is a test</a>
           <ul>
                    <li><a href="http://itu.dk/people/lfel/Web-kodning/xxx.html"&gt;Your profile</a></li>
        <li><a href="http://itu.dk/people/lfel/Web-kodning/xxx.html"&gt;New profile</a></li>
       </ul>
        </li>
     <li class="menu_punkt"><a href="http://itu.dk/sos_profil_menu/sos_profil.html"&gt;SOS Profile</a>
       <ul>
                    <li><a href="http://itu.dk/people/lfel/Web-kodning/din_profil.html"&gt;Your profile</a></li>
        <li><a href="http://itu.dk/people/lfel/Web-kodning/ny_bruger.html"&gt;New user</a></li>
       </ul>
           </li><li class="menu_punkt"><a href="http://itu.dk/log_ind.html"&gt;Log ind</a></li>     
</ul>
</div>
  </div>

and my CSS is:

/*horisontal navbar*/
#menu-dropdown {
    list-style: none;
    position: absolute;
    top: 600px;
}

#menu-dropdown ul li {
    float:left;
    list-style-type: none;
    font-size: 0.8em;
}

#menu-dropdown li ul {
    position: absolute;
    display: none;
    background-color:#cdc3a2;
    padding: 0px;
    margin-bottom:1px;
}

#menu-dropdown ul ul li {
    clear: both; 
}

#menu-dropdown ul li a {
    display: block;
    padding: 10px;
    color:#102B47;
    text-decoration:none;
    font-family:Verdana, Geneva, sans-serif;
    font-size: 1em;
}

#menu-dropdown ul li a:hover {
    background-color: #cdc3a2;

}

#menu-dropdown li:hover ul, li.over ul {
    display: block;
}

You can see my problem here: http://dl.dropbox.com/u/70953/SOSfrontpage.html

Regards - Mestika

Answer 1

I think you should add a width to the menu-dropdown ul li class.

A great way to build a css drop down menu is son of a suckerfish.

Answer 2

Yes JAO is right u shoud give width to li like this

#menu-dropdown ul ul li {
clear:both;
width:107px;}

you can get more clue from here http://www.cssnewbie.com/example/css-dropdown-menu/

Answer 3

Add a width to the submenu anchors

.menu ul li a { width:200px;}

Also add the hover to the li (not teh anchor) that way the top menu stays selected when you are in the submenus

#menu-dropdown ul li:hover, #menu-dropdown ul li.hover {
    background-color: #cdc3a2;

}

Answer 4

Try:

.menu ul li li {width: 100%}

Answer 5

when I learnt to write css dropdown menus I based a lot of experiments on the ton of examples on this site : http://www.cssplay.co.uk/menus/ - very clear css / html examples, minimal, clean code

hope it helps :)