help with dropdown

[cybershot]

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/

[joshuanhibbert]

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/

[joshuanhibbert]

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.

[joshuanhibbert]

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;

[joshuanhibbert]

No worries.

[Author]

Posts