Forums

  • # 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: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: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 6:49 pm

    No worries.

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag