2

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.

UserIsStuck
  • 519
  • 1
  • 6
  • 18
  • I invested my time in solving that jsfiddle issue :D – Jack Mar 20 '12 at 13:52
  • @Pankaj - and I thank you very much for that and your words of encouragement. It's a good lesson for me to learn. But unfortunately does not answer the critical part my original question. – UserIsStuck Mar 20 '12 at 18:11
  • I dont know what is your problem actually if you want to dropdown according to the menu bar you need to remove those widths,and you can make sure by doing this... – Jack Mar 20 '12 at 18:21
  • @Pankaj - See http://jsfiddle.net/Pnn6V/5/ and notice how each drop down starts at the parent li item instead of aligning with the beginning/left side of the blue menu bar? I want the dropdown to align with the menu bar. – UserIsStuck Mar 20 '12 at 19:33
  • hope this time i got this...please let me know.. – Jack Mar 21 '12 at 05:54

2 Answers2

3

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

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

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 :

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...

Community
  • 1
  • 1
Jack
  • 1,442
  • 12
  • 20
  • Though this is the solution it doesn't help the OP tackling the problem. A short description would be nice. – Christoph Mar 20 '12 at 12:54
  • well, just editing and posting the solution helps neither the OP nor other users with the same question. Explanation >> copy&paste. – Christoph Mar 20 '12 at 13:13
  • well ya you are right, though still i covered only one part of this question half remaining... – Jack Mar 20 '12 at 13:16
  • Thanks for the explanation, but Christoph is right. I'm not looking to fix the jsfiddle example. I created that from copying & pasting from the tutorial and didn't have time to figure out why it wasn't quite right. I'll try to edit the question to clarify. – UserIsStuck Mar 20 '12 at 13:42
  • @user5668 you are putting widths in all section see my edit, by putting width they are bound to expand that much only so if you want drop-down to look as full width as menu bar you have to adjust those widths. – Jack Mar 20 '12 at 13:47
0

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

Luca
  • 4,223
  • 1
  • 21
  • 24
  • this reset.css is pretty useless. Lot of code, minimal effect, coz you have to redeclare everything. Declare margins/Paddings directly where you need it is the better way. – Christoph Mar 20 '12 at 12:57