How do I combine this 2 sets of coding together to form a mega drop down nav

Tags: css,navigation

Problem :

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:

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:

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.

Solution :

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
#menu li:hover .dropdown_2columns
#menu li:hover .dropdown_3columns
#menu li:hover .dropdown_4columns
#menu li:hover .dropdown_5columns {  

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.

    CSS Howto..

    How to use a lower resolution image for mobile?

    css code how to change active navigation button color

    jQuery UI Tooltip with Arrow, why/how does this code work?

    How can I make a color background that expands out of the 960 grid system?

    how to 3D rotate a 'a' tag?

    How to: Reduce font-size if a line breaks

    How to slide/grow a tile to position with 90x90px with CSS

    How to achieve video-play navigation like khan academy in bootstrap? [closed]

    How to put an image at the left side of text without putting the image into css

    How to make a div that appear on hover, stay while its hovered on in jquery or css

    Issue with Hide / Show Jquery on fixed positioned div

    How to contents of div onclick tab

    Can't show Combobox in table

    How to move a CSS class below another? [closed]

    how to arrange divs with css as a grid?

    How to clone the inner html of a list in query and wrap it

    How to add style to android app

    CSS - How can you apply Border Shadow Inset only to 2 sides?

    How can I make dynamic progress bar using just jquery?

    in html and css how to get the box space to be smaller? [closed]

    How can I add a border to the right side of this object?

    GWT: How to catch what code overrides the CSS cursor value. Or why it overrides?

    How to assign margin to child div to not float out of the parent div?

    Tag image in svg invisible in FireFox because of using style. How to fix?

    How to add CSS to all tds of a particular tr in jQuery?

    How to mimic Photoshop “Color Overlay” in CSS

    HTML/CSS: How to get some text to align on right and other text on left on same line of table cell

    how to target individual elements in grails g:render

    How to achieve this diagonal drop down effect with CSS?

    How to get the max width of my css element using javascript