2

我需要一个带有 2 条水平线的菜单和子菜单的 CSS 菜单：
悬停在菜单上，子菜单将加载到第二行。
我得到了这样一个菜单的好代码：HERE。

现在它的工作方式好像
--我将鼠标悬停在菜单上，如果有子菜单，它们会出现
-我将鼠标从菜单上移开，子菜单将消失

虽然颜色组合不好，但功能很好，因为我希望它们在子菜单中是水平的。

在此处输入图像描述

期望的修改

现在我需要稍微修改一下菜单，然后如果-
- 我将鼠标悬停在 MENU 上，如果有 SUB MENU，它们会出现
- 我将鼠标从 MENU 上移开，SUB MENU 将消失
- 我点击菜单，然后将选择菜单并加载特定页面，并且子菜单将出现并在他们指定的位置可见
-我单击子菜单，然后将选择子菜单并加载特定页面SUB MENU 也将可见

应该是这样的：这个菜单

哪里要做修改？
我试过了：

.menu li:active > ul {
  position: absolute;
  display: block;
  width: 920px;
  height: 25px;
  margin: 40px 0 0 0;
  background: #315299; 
}

但它不起作用。:(

PS：我正在使用 WordPress 网站中的菜单。

4

1 回答 1

0

这是我最后提出的解决方案。它是WordPress 特定的：

.menu li.current-menu-item > ul,
.menu li.current-menu-parent > ul,
.menu > li > ul > li.current-menu-item > ul{
  position: absolute;
  display: block;
  width: 960px;
  height: 25px;
  margin: 23px 0 0 0;
  background: #E5E5E5; 
}

.menu li.current-menu-item > ul li a,
.menu li.current-menu-parent > ul li a,
.menu > li > ul > li.current-menu-item > ul li a{
  float: left;
  color: #000;
  text-decoration: none;
  margin: 0;
  padding: 0 30px 0 0;
  background: #E5E5E5; 
}
于 2012-11-06T07:44:53.380 回答