Grow your CSS skills. Land your dream job.

help with dropdown

  • # July 23, 2012 at 10:41 pm

    I can’t seem to figure out what the key to making a dropdown menu is. I always have trouble with the dropdown size of the menu. Should I put a width or can I get it to auto size according to the text? how do I line up the dropdown under the appropriate menu item? Please check out what I have so far and offer any fixes. I have been working on this for an hour

    http://jsfiddle.net/FgdCk/

    # July 23, 2012 at 11:20 pm

    Firstly, there is no need to do the following:

    #header #nav { ... }

    As IDs are the fastest selector, and only one exists on each page, you can simply do:

    #nav { ... }

    Secondly, change this:

    #navigation li {
    line-height: 100px;
    vertical-align: middle;
    display: inline;
    ...
    }

    to this:

    #navigation li {
    line-height: 40px;
    vertical-align: top;
    display: inline-block;
    ...
    }

    The large line-height was causing you all sorts of issues. In regards to using inline-block; that will stop the text from wrapping, as it was with ‘404 page’.

    Here is the amended version: http://jsfiddle.net/joshnh/PvQLz/

    Also, here is another CSS drop down menu for you to check out: http://jsfiddle.net/joshnh/srNVQ/

    # July 23, 2012 at 11:30 pm

    for the sake of the design, I need the line-height: 100px and the vertical-align: middle. I found that for me, this is the best method to align the menu directly in the middle. When I change it to what you said, it puts the nav at the top of the container and that won’t work. the display: inline-block however did fix the positioning of the menu and perhaps the word wrapping. I will have to add some styles to sub menu to fix it up but it seems to be working. I am not sure why display: inline-block fixed it but it did. Thanks for the examples. I am going to keep them in snippets to study for next time.

    # July 23, 2012 at 11:47 pm

    If that is the case, then I need to see more of the design. In my experience, using line-height for positioning isn’t generally a great idea, as you are discovering with this issue.

    If you are able to share the bigger picture with me, I will try and find another solution for you.

    # July 24, 2012 at 1:11 am

    This is exactly what I have now

    http://jsfiddle.net/FgdCk/3/

    the black represents my background on my site. So the dropdown will begin just under the black background as it does in the example. So, as you can see. The line-height:100px and the vertical-align: middle; is used to vertically center the navigation.

    # July 24, 2012 at 1:19 am

    Right, so here is the working version: http://jsfiddle.net/joshnh/upmNh/

    As you can see, I was able to get it working without using line-height: 100px;

    # July 24, 2012 at 11:43 am

    nice work. thanks for the help.

    # July 24, 2012 at 6:49 pm

    No worries.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

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