Question

一开始我正在研究如何创建一个巨大的下拉导航因此我绕过网络研究并且意识到定义每个下拉列表的宽度和位置是最好的。对不起，如果你无法理解，但我也找到了一个js.fiddle。

JS为下拉导航小提琴：http://jsfiddle.net/Pnn6V/9/。

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

JS小提琴使用css http://jsfiddle.net/NGLN/dqBNr/3/

均匀分布导航

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

我想知道是否有人知道如何将这两套编码结合在一起？非常感谢。如果您对我所谈论的内容有任何疑问，请告诉我，以便我可以尝试改写它。感谢。

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位置属性来充分利用它。我让this jsfiddle工作正常。我做了以下更改：

将position:relative;添加到#menu
从position:relative;

#menu li

将position:absolute;添加到.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns
在曾经拥有特定像素值的所有悬停规则（例如left:0px;）上设置#menu li:hover .dropdown_1column。

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

Answer 2

具有width: 100%的元素必须是对齐的内联块的兄弟。在你的情况下，它必须在ul内。请在此处查看：http://jsfiddle.net/dqBNr/21/

如何将这两组编码组合在一起形成一个巨型下拉导航

2 个答案: