The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS horizontal menu

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #32113

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

    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?


    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.


    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.