html - CSS子菜单对齐问题

Question

我目前正在学习一个关于响应式网页设计的教程，我想让我的导航与教程中的不同(我希望我的导航栏有彩色背景，并且居中......而不是图特的没有 bkgd 并且是左对齐的)。

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

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

如果我重新添加“float:left;”，您会看到导航的背景色条消失了，并且我的菜单项不再像我希望的那样居中(不是我将此版本的 bkgd 颜色设置为深灰色，这样您就可以看到菜单项)，如下所示:

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

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

谢谢!!

Answer 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%;
}