Grow your CSS skills. Land your dream job.

CSS Drop Down Menu

  • # September 14, 2011 at 11:04 am

    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

    # September 14, 2011 at 11:19 am

    I’ve found the best way is to use someone else’s HTML and step through their CSS to see what effect enabling each selector does.

    I.E. Disable all selectors and then enable each attribute in turn to see the changes.

    As I recall, most horizontal menus tend to float their ‘li’ or ‘a’ links but inline-block can work too.

    # September 14, 2011 at 12:17 pm

    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.

    # September 14, 2011 at 1:11 pm

    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!

    # September 14, 2011 at 3:01 pm

    Here ya go. Mines the easiest tut to follow you will likely find. http://www.visibilityinherit.com/code/drop-down.php

    # September 14, 2011 at 3:30 pm

    Yo @Thomas, thanks so much dude. AWESOME. @Eric, I will have a look at it now.

    # September 14, 2011 at 4:25 pm

    @Thomas and @Eric I’d like to thank you very much for your input. @Thomas I built everything up from your fiddle, @Eric I will be studying your tutorial later this evening. Both of you are awesome.

    I’ve hosted the menu I created on my server, have a look at it and let me know what you think!

    http://how-do-i-find-peace.com/sole

    Have not tested it in anything other than Chrome just yet — IE here I come.

    # September 14, 2011 at 4:26 pm

    ugh. Breaks in 7 and breaks super bad in 6. Any input? Someone said something about inline-block?

    # September 14, 2011 at 4:40 pm

    Opera 11.51 – works
    Firefox 6.0.2 – small issue, the li juts out past the bottom border by maybe 2px
    IE 9 – works
    IE 8 – works
    IE 7 – no
    IE 6 – hell no
    Chrome 13.0 – works
    Safari 5.1 – works

    I’m imagining there must be some IE hacks to make these work properly … anyone happen to know what they might be?

    Thanks!
    Tanner

    # September 14, 2011 at 5:01 pm

    Mine works in all

    # September 14, 2011 at 5:03 pm

    haha. thanks @Eric

    # September 15, 2011 at 7:12 am

    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)
    # September 15, 2011 at 9:08 am

    @tannercampbell, @thomas is right on the money, but let’s take a deeper look into things so that maybe you have a better understanding of the hows and whys. Looking at your html I had a series of questions (that don’t necessarily need answering):

    • Why a transitional docytpe – isn’t this a new page? Always use strict for new development. I’d go further and recommend using the html5 doctype, even if you’re not ready to use the new elements. It’s backwards compatible and much easier to write ;)
    • Why is your menu five elements deep? Too many divs being used here.
    • Why in the source code did you use all caps for the menu items? Use css to control that.
    • Why two of the same navigation id? Not valid and will (could, should) cause problems.
    • Why the clearing break elements? Sloppy unnecessary practice.
    • Why the comments before the opening div? Surely you can see what it is by looking at the id.
    • Why no element around ‘gfgf’ (even though it’s dummy content)?

    Let’s clean things up a bit and concentrate on the menu and navigation. I’ve eliminated a div or two. I’ve also added anchors to all the list items – this is navigation after all – with the exception of the About list item, which I’ve classed as active (assuming the current page, which may take this further than you wanted). As thomas stated above, we’ll be using those anchors for styling. Here’s my quick re-do:

    < !DOCTYPE html>


















    gfgf






    Okay, ask any questions you may have and we’ll address those before moving on to the css.

    # September 15, 2011 at 10:35 am

    @wolfcry911 I’m going to take the time to answer everything you just asked, just give me a moment. I respect your knowledge and you’ve helped me a lot in this forum in the past so I’d like to dignify those questions with responses.

    @eric your tutorial is amazing. I’ve never seen everything so cut and dry like that, I benefited immensely. The 9 level menu you made was incredible, I’ve never seen something like that done before. My brain would have exploded with all the child ul and li tags.

    I’ve changed the page a bit and would love if you could look at it @eric. Thanks very much. @wolfcry911, I’m going to type up your answers right now.

    http://how-do-i-find-peace.com/sole

    # September 15, 2011 at 10:46 am

    @wolfcry911

    http://how-do-i-find-peace.com/sole

    1. I’m very self-taught, I’ve never even read a book on CSS or HTML. It’s all been forums and OJT. For that reason, there’s a lot of stuff I don’t understand the way I ought to. doctype is one of them. I’ve made the change you suggested.

    2. Is there a benefit to using fewer divs? How would I float the menu to the right of the logo without a div? I was under the impression that anything you wanted to position (relatively or otherwise) had to be wrapped in a div. If this isn’t true, I’d like to know … I mean, up till 6 months ago I use to list all my divs as “position: relative” for apparently no reason as I found out that was completely unnecessary :), whoops.

    3. text-transform: capitalize; or something, right? I will do that. Is there a penalty here as far as crawlability?

    4. br style=”clear: both;” has been the only way I’ve found that I can get height: 100%; divs to respond to the floated divs within them. Again, all self taught here, Is there a better way to achieve this?

    5. I use the comments so I don’t get lost, they get pulled out before the site goes life. Just a bit of OCD bookmarking for my ADD ;)

    6. It wasn’t supposed to be there, I had a hard time bringing that div down for some reason. I entered the dummy text to find the thing in DW, I just forgot to remove it.

    I don’t understand your re-do because I guess I didn’t understand that a thing can be positioned without being in a div.

Viewing 15 posts - 1 through 15 (of 31 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".