CSS帮助 - 调心megamenu

我下面这个教程，我试图把它修改我的使用：http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/ ...CSS帮助 - 调心megamenu

如果我做下拉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的轻微问题，因为它不是我面临的问题/而不是我所问的问题。

来源

2012-03-20 UserIsStuck

我投资我的时间解决了问题的jsfiddle：d – Jack 2012-03-20 13:52:54

@Pankaj - 我非常感谢你和你的鼓励。对我来说学习是一个很好的教训。但不幸的是没有回答我原来的问题的关键部分。 – UserIsStuck 2012-03-20 18:11:34

我不知道你的问题实际上是什么，如果你想根据菜单栏下拉菜单，你需要删除这些宽度，你可以确保这样做... – Jack 2012-03-20 18:21:57

你从教程改变菜单的排列使一些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必须被删除。这是主要原因。

看到这个输出

有这么多的教程大型下拉它取决于你的需要的菜单，请他们是否满足您的需要看一看。

Jquery and css dropdowns

，我会建议你仔细阅读教程，并改变相应的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-20 12:49:10 Jack

虽然这是解决方案，但它不能帮助OP解决问题。简短的描述会很好。 – Christoph 2012-03-20 12:54:34

现在很好，我猜 – Jack 2012-03-20 13:01:59

不错，现在+1; =） – Christoph 2012-03-20 13:09:52

您可以尝试在你的页面中加入CSS复位，减少浏览器的不一致性 http://meyerweb.com/eric/tools/css/reset/

来源

2012-03-20 11:59:21 Luca

这reset.css是相当无用的。很多代码，最小的影响，因为你必须重新声明一切。直接在需要的地方直接声明边距/ Paddings是更好的方法。 – Christoph 2012-03-20 12:57:11

CSS帮助 - 调心megamenu

回答

相关问题