Question

I have this CSS menu:

http://jsfiddle.net/7JC8t/

If you hover your mouse over ‘inostranstvo’ you will see a dropdown open below it. What I’ve been trying to do but failing is to get the dropdown items to look like the items in the horizontal menu.

So when a user hovers over ‘inostranstvo’ the items that show up should have: the same width (width of the widest item), same height and background as the existing menu items.

The background is easy, but I can’t force the height and I don’t know how to align the widths. This doesn’t do anything:

#nav li:hover ul li{
    height:55px;
    line-height:55px;
    width:200px;
}

The width value is random, what’s most important is the height, which I can’t seem to force on the list items. On the other hand, adding a border works, but it adds it inside the red background area. I’m sure this can’t be complicated, but I can’t figure it out.

Answer 1

Have you tried to set the submenu li elements to “display-type: block”?

I have added the following css to JSFiddle and it seems to work:

#nav li:hover ul li {
    display: block;
    background: #DE2211;
    border-bottom: 1px solid black;
}