CSS子菜单对齐问题

Question

我目前正在通过一个关于响应式网页设计的教程，并且我想让我的导航不同于教程的内容（我希望我的导航栏有一个彩色背景，并且居中.. ..反对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/

我敢肯定它可能是一种愚蠢的东西，我只是俯视，但我花了太多时间搞乱它，并且无处可去，所以希望别人能够帮助我解决这个问题。感谢您提供的任何帮助！

谢谢！

Answer 1

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

通常<li>垂直放置，而在这里它们由于display: inline;属性值而水平显示。

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

解决的办法是：用display: inline-block;，结合行内显示风格与块级行为：

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

Answer 2

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

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