0

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

我正在尝试设计基于 WordPress 的网站的导航菜单。

我希望子菜单链接沿网站<body>标签的整个宽度（960 像素宽）均匀排列。如果特定子菜单的链接不适合一行，我希望它们环绕并排列成整齐的列。

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

问题：子菜单无序列表影响父无序列表中链接的位置，移动链接。不知何故，为了保持父菜单链接不变，我唯一能做的就是通过应用将子菜单拉开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;
}
4

2 回答 2

0

这应该这样做

将此添加到您的CSS

.main-navigation ul li .sub-menu {position:absolute; left:0px;}
于 2013-04-16T18:03:12.867 回答
0

找到了我自己的答案。

  1. 从 中删除背景ul li:hover ul。

  2. 设置position:relative和灰色背景为ul li:hover >ul li.

  3. 为每个子菜单li项单独设置负左边距，以将它们分别向左拉不同数量的像素。

于 2013-04-16T20:46:15.807 回答