全宽水平导航

Question

我目前有一个伪全宽水平导航，通过在每个导致导航扩展为几乎全角的列表元素上设置边距来创建。问题在于，如果导航中的任何内容发生变化，它将会中断，我将不得不找出新的确切边距以使其扩展为全宽度。另外，不同的浏览器会稍微改变我的文本和其他内容的大小，这意味着在另一个浏览器中，一个浏览器中的全角太大（并且会打断另一条线）。

所以我想找出一个更好的解决方案。我有一个为顶级导航项，其中包括改变下面的CSS有效的解决方案：

ul.menu { 
    list-style-type: none; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    display: table; 
} 

ul.menu > li:first-child { 
    padding-left: 0; 
} 

ul.menu > li:last-child { 
    padding-right: 0; 
} 

ul.menu li { 
    padding: 12px; 
    display: table-cell; 
    text-align: center; 
} 

ul.menu li a { 
    padding: 12px 0; 
    margin: auto; 
} 

结果看起来是这样的：

这似乎是完美的工作，但不幸的是（和可预测），它搅乱了子菜单，现在这个样子：

我一直在玩弄子菜单的CSS试图让它像过去一样工作，但一直不成功。

有没有人知道我需要在这里做什么更改，以获得顶级元素的全宽度导航工作，而离开原来的子菜单？

Answer 1

我想我理解你，但让我看看我能否帮助你在那里（或者至少更接近）解释。

得到 “全宽” 你要确保你的容器元素有：

position:relative或position:absolute

您当前的CSS有

.container { 
    position: relative; 
    /* ... */ 

那就好。这意味着我们可以将子元素定位在此框中，这样我们就可以获得“全角”。

现在我们要确保没有更低的子元素取代此规则。 有一个！我们要删除该位：

ul.menu li { 
    position: relative; /* remove */ 
    /* ... */ 

这将导致子菜单包含父li这会导致一些问题，当我们试图让它填写完整的菜单栏的宽度内。

接下来是调整子菜单。这种选择：

ul.menu li ul.sub-menu{ /*... */ } 

我们想要的子菜单是全宽，所以我们增加：

width:100%; 

现在，我们已经有了min-width:100%，但我更喜欢坚持width，特别是如果我们知道我们要去做100%。也许这是我的旧IE6骨头令我痒，但也许有一个原因。它应该在现代浏览器中工作，而不需要添加width:100%。所以采取一点盐一点点。

接下来，我们要通过添加定位子菜单：

left:0; 
top:4.5em; 

这应该放置子菜单的全部宽度横跨主菜单的宽度，砸下来刚好在主-菜单。根据您的设计需要，可能需要一些轻微的推特。

从那里，我们想平坦的子菜单项，以便他们水平。要做到这一点，我们需要删除：

ul.menu li ul.sub-menu li { 
    width: 100%; /* remove */ 
    /* ... */ 

和

ul.menu li ul.sub-menu li a{ 
    /* ... */ 
    display:block; /* remove */ 
    /* ... */ 

否则，子菜单项将只填满了整个空间，我们会回来的垂直设计。

我想这就是我所做的全部水平子菜单栏。我希望这就是你要找的。看起来你的垂直子菜单很好。

但是，我会跨浏览器测试这个解决方案。我只在Chrome的开发者工具中修改过。

（我希望我没有错过任何我的开发人员工具的编辑）

这可能不会让你一路有，但我希望它能帮助！

干杯！

ps。我注意到两个问题。项目数量有限的子菜单倾向于感到左侧被挤压。包含大量项目的子菜单将包装。

这可能是好的，或者你可能想考虑一个额外的小菜单的类，分散项目更好一点。

Answer 2

更新这一个。希望它能解决你的问题。

ul.menu > li { 
    padding: 12px; 
    display: table-cell; 
    text-align: center; 
}