0

我有一个 jsfiddle.net/vanduzled/AgAwK/ 它原来是 wp_list_categories 的输出：

所以我在 wordpress 中有一个包含子类别的类别列表，我希望它显示在我的侧边栏中。我使用 wp_list_categories 但它显示的是这样的：

配件

  • 子配件

生活用品

  • 亚生活方式产品

这看起来不错，但我想让子项（即子附件）隐藏，当您将鼠标悬停在父项（即附件）上时，子项将出现在侧面，就像具有两级布局的正常垂直导航一样。

在我的小提琴中， .children 类是隐藏的，当您将鼠标悬停在父级上时，我将 inline-block 打开，但它不起作用。

我实际上正在使用 Foundation 框架，并且 Zurb 已经内置了一个导航菜单，但是我不能在动态插入菜单中使用它，就像使用自定义步行器一样，然后样式是必要的，因为在 Foundation 中，它们有一个 我无法放入 wordpress 的 wp_list_category 函数中的额外类。

我不知道这是否可以用纯 css 或 js 来完成。

4

1 回答 1

0

您可以从 A list Apart 中使用传统的 css 来执行此操作：

/* ASDIE NAV*/

ul.side-nav { display: block; list-style: none; margin: 0; padding: 17px 0; }
ul.side-nav li { display: block; list-style: none; }


.children{
  width: 200px;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid #ccc;
}

ul.side-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 220px; /* Width of Menu Items */
  border-bottom: 1px solid #ccc;
  }

ul.side-nav li {
  position: relative;
  }

.side-nav li ul {
  position: absolute;
  left: 199px; /* Set 1px less than menu width */
  top: 0;
  display: none;
  }

/* Styles for Menu Items */
ul.side-nav li a {
  display: block;
  text-decoration: none;
  color: #777;
  background: #fff; /* IE6 Bug */
  padding: 5px;
  border: 1px solid #ccc;
  border-bottom: 0;
  }

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul.side-nav li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */

li ul.side-nav li a { padding: 2px 5px; } /* Sub Menu Styles */

ul.side-nav li:hover ul.children, ul.side-nav li.over ul.children { display: block; } /* The magic */

/* ASIDE !NAV */
于 2012-12-21T06:36:49.133 回答