CSS help - aligning megamenu

Question

I'm following this tutorial and am trying to modify it to my use: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/...

If I make the dropdown div to be the same full width as the horizontal menu bar, how do I make sure it's aligned with the menu bar?

I have found that I can change the left declaration in the following CSS rules to get the dropdown to align with the menu bar.

#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 {
    left:-1px;  /* <-- change this to left: -150px (or whatever value will get it to align) */
    top:auto;
}

But this doesn't seem like the best way for me to do this as different browsers render the menu slightly differently and therefore require different values in order to get the drop down to align.

What's a better way to get the dropd down to align with the menu bar? Or perhaps someone can point me to a better tutorial?

I've copied the code from the tutorial to this: http://jsfiddle.net/Pnn6V/. Please disregard the slight issues with the jsfiddle as it's not the problem I'm facing/not what I'm asking about.

Answer 1

You are changing alignment of the menus from tutorial so some css settings also need to change to get the desired effect.

I would like the dropdown div to be the same full width as the full horizontal menu bar and be aligned with the menu bar.

In tutorial it says

In order to have a perfect drop down container, we need to specify the width for each one

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

So you are supposed to adjust all the widths according to your need.

what I have done in your css is

    #menu li .align_right {  
    /* Rounded Corners */  
   /*-moz-border-radius: 5px 0px 5px 5px;  
    -webkit-border-radius: 5px 0px 5px 5px;  
    border-radius: 5px 0px 5px 5px;*/
}  

#menu li:hover .align_right {  
   /* left:auto;
    right:-1px;*/   
    top:auto;  
} 

I removed right border of your 1column because in tutorial it was having different alignment (it was in right) and what you are doing with this 1column is you are putting this on left so right border have to be removed. that was the main reason.

see this output

• Output
• jsfiddle

There are so many tutorials for mega drop down menu it depends on your need, please take a look if they suit your need.

• Jquery and css dropdowns

And i would suggest you to read the tutorial carefully and change css accordingly/oppositely , that will clear so many css doubts/concepts of yours and soon you will learn CSS easily. and that day is not far when you will be answering css questions here :)

EDIT :

According to your comment i understood this :

• Jsfiddle

• Output

what I have done is :

I changed the width accordingly:

.dropdown_1column {width: 930px;}  
.dropdown_2columns {width: 931px;}  
.dropdown_3columns {width: 930px;}  
.dropdown_4columns {width: 932px;}  
.dropdown_5columns {width: 932px;}  

Previously left property was applying on all column which was incorrect you have to apply individual left value in each as per I dont

#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;  
}  

Hope this is clear...

Answer 2

You can try adding a css reset in your page to reduce browser inconsistencies http://meyerweb.com/eric/tools/css/reset/