Forums

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

Home Forums CSS CSS Drop Down Menu

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #34352
    tannercampbell
    Participant

    I’ve done these before, but in all honesty I’ve always found the code elsewhere and modified it for my needs. I’ve never done one from scratch – the tutorials I’ve tried to read never seem to do the trick.

    body {margin: 0; background: #EEE; font-family: 'Abel', sans-serif;}

    #menuContainer {width: 100%; height: 60px; background: #0b4f85;}
    #menu {margin: 0 auto 0 auto; width: 960px; height: 60px;}
    #logo {margin: 0; height: auto; float: left; padding: 5px 0 0 0;}
    #navigation {margin: 0 0 0 20px; height: 60px; float: left; width: 810px;}


    /* Styles */
    img {border: none;}
    ul.navigation li {display: inline; color: #FFF; font-size: 24px; padding: 0 20px 0 20px;}

    /* Navigation */

    I’ve only just started as you can see. I’ve gotten the list to appear horizontally, and now I’m trying to figure out how to make the child ul and li “drop down”. I can copy and paste from a tutorial … but I’d really like to grasp this in a way that I can knock out drop down menus in the future without it being the most painstaking part of the design. Plus I never get it when I read a tutorial because while they do show you how to do it, they don’t really explain why it works.

    So how do I tell the next set of ul and li to appear as drop downs? This isn’t urgent … whenever anyone might have some time, I’d be appreciative of the opportunity to learn this from someone better than me.

    Thanks,
    Tanner

    #87183
    thomas
    Member

    Here’s a CSS drop-down navigation with only a minimal amount of code:

    http://jsfiddle.net/VPadm/

    Do enough of these types of menus and you can make them in your sleep. Be careful of using inline-block with older versions of IE, though. You might need to float the items as Paulie_D mentioned, in that case.

    #87187
    TheDoc
    Member

    To be honest, I’ve always been rather embarrassed by my lack of knowledge in this area. I also look at other people’s examples to do it. I just haven’t spent enough time dissecting the code and figuring out why certain things work. For shame!

    #87235
    thomas
    Member

    Yeah, you won’t be able to use inline-block if you need to support IE6 and IE7. Floating the top-level <a>s is probably the best alternative.

    The reason you don’t want inline <a>s is that you want to be able to give them a width and height, since the clickable area is usually larger than just the text.

    Basically, a CSS drop-down menu boils down to the following:

    • Relatively (or absolutely) positioned <li>s with block-level anchors inside (they must use position:relative/absolute in order for the drop-down menus to be positioned in relation to them)
    • Hidden second-level <ul>s (usually hidden with display:none) that are absolutely positioned in relation to their containing <li>
    • Use of a :hover selector on the parent <li> that causes the second-level <ul> to be visible (usually with display:block)
    #117781
    mobilitysd
    Member

    Hello, here is simple drop-down menu on CSS which works almost everywhere: [drop-down menu on CSS](http://basicuse.net/articles/pl/textile/html_css/simple_drop_down_menu_using_only_css “drop-down menu on CSS”)

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