Question

At the beginning i was looking at how to create a mega drop down navigation therefore i went around the net researching and came about to realise that defining the width and position of each dropdown is the best. sorry if you couldn’t understand but I found a js.fiddle with it too.

JS fiddle for the drop down navigation: http://jsfiddle.net/Pnn6V/9/.

However, i realise that the headings on the navigation (eg. Home, 5 columns , etc) are not evenly spread out as they are spread out be fixed px. therefore i went to research on how can i evenly spread out the headings. Then i found that actually by using CSS display: inline with text justify I can do the trick. Sorry if it confuses you. But i found a js fiddle for this too.

JS fiddle for evenly spread out navigation using css: http://jsfiddle.net/NGLN/dqBNr/3/

I tired combining them together by adding the span tag and also the justify properties, I also changed the display to inline and inline-block but the whole thing messed up.

I was wondering if anyone have any idea what could i do to combine this 2 sets of codings together? Thanks a plenty. If you have any doubt of what i am talking about please kindly let me know so i can try to rephrase it. Thanks.

Answer 1

So the headings are perfectly spread out, I assume you’re talking about when you change them that the drop-downs get offset strangely. This issue is being cased because of these rules:

#menu li:hover .dropdown_1column
{
    left:-841px;
    top:auto;
}
#menu li:hover .dropdown_2columns
{
    left:-2px;
    top:auto;
} 
#menu li:hover .dropdown_3columns
{
    left:-736px;
    top:auto;
}
#menu li:hover .dropdown_4columns
{
    left:-248px;
    top:auto;
}  
#menu li:hover .dropdown_5columns {  
    left:-110px;  
    top:auto;  
}

There are a couple of ways you could fix this. One by attaching to the onhover event using JavaScript/jQuery and setting the left to the correct position (#menu’s left).

The other nicer way is to use the CSS position property to it’s fullest. I got this jsfiddle to work fine. I made the following changes:

• Added position:relative; to #menu
• Removed position:relative; from #menu li
• Added position:absolute; to .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns
• Set the left:0px; on all the hover rules (eg. #menu li:hover .dropdown_1column) that used to have the specific pixel values.

This works because the position:absolute; on the dropdowns will now position to the menu’s position, not relative to the menu item as before.