html - CSS 帮助 - 对齐 megamenu

Question

我正在学习本教程并尝试修改它以供我使用:http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/ ...

如果我使下拉 div 与水平菜单栏的全宽相同，我如何确保它与菜单栏对齐？

我发现我可以更改以下 CSS 规则中的 left 声明以使下拉菜单与菜单栏对齐。

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

但这似乎不是我执行此操作的最佳方式，因为不同的浏览器呈现菜单略有不同，因此需要不同的值才能使下拉菜单对齐。

让下拉菜单与菜单栏对齐的更好方法是什么？或者有人可以为我指出更好的教程？

我已将教程中的代码复制到此:http://jsfiddle.net/Pnn6V/ .请忽略 jsfiddle 的小问题，因为这不是我面临的问题/不是我要问的问题。

Answer 1

您正在更改教程中菜单的对齐方式，因此还需要更改一些 css 设置才能获得所需的效果。

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

在教程中说

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

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

所以你应该根据你的需要调整所有的宽度。

我在你的css中所做的是

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

我删除了你的 1column 的右边框，因为在教程中它有不同的对齐方式(它在右边)并且你对这个 1column 所做的是你把它放在左边所以 right border 有即将被删除。这是主要原因。

看到这个输出

• Output
• jsfiddle

mega drop down menu的教程太多了，看你的需要，看看有没有适合你的。

• Jquery and css dropdowns

我建议您仔细阅读本教程并相应地/相反地更改 css，这将清除您对 css 的许多疑虑/概念，很快您就会轻松学习 CSS。离你在这里回答 CSS 问题的那一天不远了:)

编辑:

根据您的评论，我理解了这一点:

• Jsfiddle

• Output

我所做的是:

我相应地改变了宽度:

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

之前 left 属性应用于所有列，这是不正确的，您必须按照我没有的方式在每个列中应用单独的 left 值

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

希望这是清楚的...