CODEWITHSUNDEEP
cssmenuhover
Kamil
Kamil

Reputation: 13931

CSS menu - main option makes wider when submenu appears - how to fix it?

This is my code:

http://jsfiddle.net/e92Dj/17/

The problem is - main <li> becomes wider, because <ul> inside has more text.

How can I fix it?

Upvotes: 0

Views: 39

Answers (2)

Nayana Adassuriya
Nayana Adassuriya

Reputation: 24766

Try this

ul#mainmenu > li:hover > ul
{
    display: block;
    position:absolute;
}

http://jsfiddle.net/e92Dj/22/

Upvotes: 1

This_is_me
This_is_me

Reputation: 918

This may be an good-enough solution for you:

ul#mainmenu > li
{   
    display: inline-block;
    margin: 0;
    vertical-align: top;    

    width:50px;
}

ul#mainmenu > li > ul 
{
    display: none;      
    margin-left:-40px;
    width:200px;
}

and your jsFiddle : JsFiddle

Upvotes: 0

Related Questions