CSS horizontal menu

[irfan]

Hi all, pls help
im making a horizontal menu using CSS.
My HTML code is:

Home


CSS Codes


Forums


Webmaster Tools


JavaScript


Gallery

and CSS i used is :

.menu { margin:auto; width:980px; border:1px solid #DDDDDD; padding:0 }

.menu ul { list-style:none;}

.menu li { display:inline; padding:0 7px; text-transform:uppercase }

.menu ul li:hover { background-color:#CCC; }

.menu a { text-decoration:none}

Its working fine but why am i getting a space between border of “menu” and each “li” elements(i didnt give any top-bottom padding) which is very clear when on the hover state?

[irfan]

thanks wolfcry911, that is working.. one more doubt ..
How to increase the height of that menu div .Giving just height:some px is not increasing the size of li.. See the self explanatory picture below. http://twitpic.com/4crsg1

[TheLeggett]

Since the LIs are display: inline, giving them height won’t do anything. You could use display:inline-block to make that work.

You could also make them display: block, and float them left.

[Author]

Posts