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

Home Forums CSS help with dropdown

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

    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


    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:

    Also, here is another CSS drop down menu for you to check out:


    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.


    Right, so here is the working version:

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


    No worries.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.