我有一个jsfiddle.net/vanduzled/AgAwK/,结果是wp_list_categories的输出:
所以我在wordpress中有一个带有子类别的类别列表,我希望它显示在我的侧边栏中。我使用wp_list_categories但显示的内容是这样的:
附件
生活方式产品
这看起来不错,但是我想隐藏孩子(即子配件),当你将鼠标悬停在父母(即配件)上时,孩子们会像一个带有两级布局的普通垂直导航一样出现在旁边。 / p>
在我的小提琴中,班级.children是隐藏的,当你将鼠标悬停在父母身上但我没有工作时,我会将内联块放在上面。
我实际上使用的是基础框架,而Zurb已经内置了导航菜单,但我不能在动态插入菜单中使用它,就像使用自定义助行器一样,然后样式是必要的,因为在Foundation中,他们有一个额外的类 ,我不能把它放在wordpress的wp_list_category函数中。
我不知道这是否可以用纯css完成,或者js是必要的。
答案 0 :(得分:0)
您可以使用传统的css从A列表中执行此操作:
/* 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 */