2

我正在关注本教程并尝试对其进行修改以适应我的使用： http: //net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-下拉菜单/ ...

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

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

#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 的小问题，因为这不是我面临的问题/不是我要问的问题。

4

2 回答 2

3

您正在更改教程中菜单的对齐方式，因此一些 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;  
}

我删除了 1column 的右边框，因为在教程中它有不同的对齐方式（它在右边），而你用这个 1column 做的是你把它放在左边所以right border必须被删除。这是主要原因。

看到这个输出

大型下拉菜单的教程有很多，这取决于您的需要，请查看它们是否适合您的需要。

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

编辑 ：

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

我所做的是：

我相应地改变了宽度：

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

以前左属性应用于所有不正确的列，您必须按照我不应用每个左值

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

希望这很清楚...

于 2012-03-20T12:49:10.533 回答
0

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

于 2012-03-20T11:59:21.680 回答