Question

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

没有背景我正确显示子菜单。当我在后台设置彩色条时，我能够让它出现的唯一方法是删除＆＃39; float:left;＆＃39;我最初在我的.primary ul li{}＆＃39;选择。现在已经删除了，当我将鼠标移到＆＃39; Item 4＆＃39;这是带子菜单的项目，子菜单现在显示左边与条形对齐而不是直接在第4项下面。您可以在这里看到我的意思：

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

如果我添加＆＃39; float:left;＆＃39;回来后，你会看到我导航的背景颜色条消失了，我的菜单项不再按照我想要的方式居中（不是我将此版本的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%;
}

Answer 2

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

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

此处的每个<li>也是另一个<ul>的容器，使用内联级元素作为块级元素的容器并不好

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

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

CSS子菜单对齐问题

2 个答案: