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/。请不要理会弹琴的细微问题，因为这不是我面临的问题/不是我要问的问题。

Answer 1

您正在更改从教程菜单对齐，所以一些css设置也需要改变，以获得所需的效果。

我希望下拉div与完全水平菜单栏的宽度相同，并与菜单栏对齐。

在教程中写着

为了有一个完美的下拉容器，我们需要为每个容器指定宽度。

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

我删除了您的1列的右边框，因为在教程中，它有不同的对齐方式(它在右边)，而您对这1列所做的是将它放在左边，因此必须删除right border。这是主要原因。

见此输出

• 输出
• 小提琴

有这么多关于超级下拉菜单的教程，这取决于您的需要，如果它们适合您的需要，请看一看。

• Jquery和css下拉列表

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

编辑:

根据你的评论，我理解如下：

• 小提琴手
• 输出

我所做的是：

我相应地更改了宽度：

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

以前，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;  
}  

希望这是清楚的..。

Answer 2

您可以尝试在页面中添加css重置以减少浏览器不一致( http://meyerweb.com/eric/tools/css/reset/ )。