如何将这 2 组编码组合在一起以形成一个大型下拉导航

Question

一开始，我正在研究如何创建一个大型下拉导航，因此我在网上进行了研究，并意识到定义每个下拉列表的宽度和位置是最好的。 抱歉，如果您无法理解，但我也发现了一个 js.fiddle。

JS摆弄下拉导航：http://jsfiddle.net/Pnn6V/9/。

但是，我意识到导航上的标题（例如。首页、5 列等）分布不均匀，因为它们分布在固定的 px 上。因此，我开始研究如何均匀地分布标题。然后我发现实际上通过使用CSS显示：内联文本对齐我可以做到这一点。对不起，如果它让你感到困惑。但是我也为此找到了js小提琴。

JS小提琴使用css：http://jsfiddle.net/NGLN/dqBNr/3/均匀分布导航

我厌倦了通过添加 span 标签和对齐属性将它们组合在一起，我还将显示更改为内联和内联块，但整个事情搞砸了。

我想知道是否有人知道我能做些什么来将这 2 组编码组合在一起？谢谢很多。如果您对我在说什么有任何疑问，请告诉我，以便我可以尝试改写它。谢谢。

Answer 1

所以标题是完美分布的，我假设你说的是当你改变它们时，下拉菜单会奇怪地偏移。由于以下规则，此问题正在出现：

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

有几种方法可以解决此问题。一种方法是使用 JavaScript/jQuery 附加到 onhover 事件并将左侧设置为正确的位置（#menu 左侧）。

另一种更好的方法是充分利用 CSS 位置属性。我让这个 jsfiddle 工作正常。我进行了以下更改：

• 向#menu添加了position:relative;
• 已从#menu li中删除position:relative;
• .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns中添加了position:absolute;
• 设置所有悬停规则的left:0px;（例如。 #menu li:hover .dropdown_1column ），曾经具有特定的像素值。

这是有效的，因为下拉列表中的position:absolute;现在将定位到菜单的位置，而不是像以前那样相对于菜单项。

Answer 2

带有width: 100%的元素必须是对齐内联块的同级。在您的情况下，它必须在 ul .在这里看看它： http://jsfiddle.net/dqBNr/21/