CSS子菜单对齐问题答案

【问题标题】：CSS submenu alignment issueCSS子菜单对齐问题
【发布时间】：2015-06-15 17:26:18
【问题描述】：

我目前正在研究响应式网页设计的教程，我想让我的导航与教程中的不同（我希望我的导航栏有彩色背景，并且居中..而不是 tut 的没有 bkgd 并且是左对齐的）。

没有背景，我的子菜单可以正常显示。在背景中设置彩色条时，我可以让它显示的唯一方法是删除我最初在“.primary ul li{}”选择器中的“float:left;”。现在已将其删除，当我将鼠标悬停在带有子菜单的项目“Item 4”上时，子菜单现在显示为与栏左对齐，而不是直接在第 4 项下方。您可以在这里看到我的意思：

http://jsfiddle.net/mark_a_b/ytB66/1/

如果我重新添加“float:left;”，您会看到导航的背景颜色栏消失了，并且我的菜单项不再按照我的意愿居中（不是我为此设置了 bkgd 颜色版本为深灰色，以便您可以看到菜单项），如下所示：

http://jsfiddle.net/mark_a_b/ytB66/3/

我敢肯定，我只是忽略了一些愚蠢的事情，但是我花了太多时间来搞砸它，却一无所获，所以希望其他人能够帮助我解决这个问题。感谢您提供的任何帮助！

谢谢！！

【问题讨论】：

标签： html css css-selectors html-lists

【解决方案1】：

只需将定位添加到您的子菜单left: 0; - DEMO

.primary ul ul{
    position: absolute;
    left: 0; /* this */
    z-index: 999;
    background-color: #ccc;
    height:0px;
    overflow: hidden;
    min-width: 100%;
}

【讨论】：

谢谢...我以为我已经尝试过了，但现在我想起来了，我想我愚蠢地尝试了 margin-left 而不是 just left。哎呀！感谢您的帮助

【解决方案2】：

<ul> 和 <li> 是块级元素；

通常<li> 是垂直放置的，而这里它们是水平显示的，因为display: inline; 属性值。

这里的每个<li> 也是另一个<ul> 的容器，使用行内级元素 作为块级元素 的容器并不好.

解决方案是：使用display: inline-block;，它将内联级显示样式与块级行为相结合：

.primary ul li{
    display: inline-block;
    position: relative;
}

【讨论】：