0

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

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

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

如果我float:left;重新添加''，你会看到我的导航的背景颜色栏消失了，我的菜单项不再像我想要的那样居中（不是我将此版本的 bkgd 颜色设置为深灰色而已因此您可以看到菜单项），如下所示：

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

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

谢谢！！

4

2 回答 2

2

只需在您的子菜单中添加一个定位left: 0;-演示

.primary ul ul{
    position: absolute;
    left: 0; /* this */
    z-index: 999;
    background-color: #ccc;
    height:0px;
    overflow: hidden;
    min-width: 100%;
}
于 2012-10-17T19:33:17.360 回答
1

<ul>并且<li>是块级元素；

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

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

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

.primary ul li{
    display: inline-block;
    position: relative;
}
于 2012-10-17T19:33:31.777 回答