样式无序列表独立于父无序列表

我不确定我是否正确地表达了这个问题，但是让我试着解释一下我想要达到的目标。

我正在尝试样式导航菜单的一个基于wordpress的网站。

我希望子菜单链接均匀地排列沿着网站的<body>标签的整个宽度(960px宽)。如果特定子菜单的链接不适合放在一行中，我希望它们环绕并整齐地排列成列。

最后，我希望子菜单，当它在悬停时下拉，将网站的其余内容向下推。

问题:子菜单无序列表影响父无序列表中链接的位置，移动链接。不知何故，我唯一能做的就是通过应用margin-right:-965px;

来保持父菜单链接的位置，将子菜单拉出来。

问题:我应该如何修改我的CSS定位两个子菜单一直到左边，水平与主容器的边缘?

(如果有必要，我可以为每个子菜单分别分配自定义类，例如:.submenu-about和.submenu-investors)

提前感谢您的帮助!

下面是导航菜单的完整CSS:

.main-navigation ul {
list-style-type:none;
margin-top:45px;
}
.main-navigation ul {
display: inline-block;
width:70%;
float:right;
}
.main-navigation ul li {
float:left;
}
.main-navigation ul li a {
display:block;
margin:3px 0 3px 40px;
}
.main-navigation ul ul {
background:#efefef;
display:none;
}
.main-navigation li {
    font-size: 13px;
}
.main-navigation li a {
outline: none;
text-decoration:none;
border-bottom: 0;
color: #6a6a6a;
text-transform: uppercase;
//white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation ul li:hover > ul {
margin:-1px -960px 3px 0;
display:block;
width:960px;
}
.main-navigation li ul li a {
font-size: 11px;
margin: 10px 0 10px 10px;
width:180px;
}
.main-navigation .menu-item > a,
.main-navigation .menu-ancestor > a,
.main-navigation .page_item > a,
.main-navigation .page_ancestor > a {
color: #9a9a9a;
font-weight:bold;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight:bold;
}

应该可以了

添加到你的css

.main-navigation ul li .sub-menu {position:absolute; left:0px;}

找到了自己的答案。

删除ul li:hover ul的背景
设置position:relative, ul li:hover >ul li为灰色背景。
分别设置每个子菜单li项的负左距，分别以不同的像素数向左拉它们。

相关内容

最新更新

热门标签：