使用CSS设计Thesis下拉菜单

Question

我使用的是Wordpress Thesis主题，它带有一个标准的下拉菜单，我想将它变成一个双层水平菜单。我想要的是，当你点击一个父项时，该父项的子项（但没有其他子项）是可见的。

的结构是这样的：

<ul class="menu"> 
<li class="tab tab-home"><a href="http://dirtydeals.org.uk">Home</a></li> 
<li class="tab tab-1 current-parent"><a href="http://dirtydeals.org.uk/about/"  title="About">About<!--[if gte IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="submenu submenu-1"> 
<li class="item item-1 current"><a href="http://dirtydeals.org.uk/about/subnavigation- page/" title="Subnavigation page">Subnavigation page</a></li> 
<li class="item item-2"><a href="http://dirtydeals.org.uk/about/sub-page/" title="Sub- page">Sub-page</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="tab tab-2"><a href="http://dirtydeals.org.uk/action/"  title="action">action</a></li> 
<li class="tab tab-3"><a href="http://dirtydeals.org.uk/media/" title="Media">Media<!--[if gte IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="submenu submenu-1"> 
<li class="item item-3"><a href="http://dirtydeals.org.uk/media/sample-page-2/"  title="Sample Page">Blog</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
</ul> 

我已经得到了它的工作还算不错，但问题是，我不能找到一种方法，专门针对孩子的项目明确。如果我在查看“关于”时隐藏了“博客”，那么当隐藏“关于”的子项时，或隐藏“关于”的其中一个子项时隐藏整个子菜单。

这里是我的CSS：

/*Remove the hover drop-down effect*/ 
.custom .menu ul { position: absolute; visibility: visible; list-style: none; z- index: 110; } 

/*No clears on this so we can make the submenu horizontal*/ 
.custom .menu ul li { clear: none; } 

/*Styling the submenu*/ 


.custom ul.submenu { 
margin: 0px 0 0 0; 
} 

.custom ul.submenu a { 
font-size: 1.3em; 
text-transform: uppercase; 
padding-right: 10px; 
} 

.custom ul.menu li ul.submenu li.item { 
display: inline; 
} 

.custom ul.menu li.current ul.submenu li.item { 
display: inline; 
} 

.custom ul.menu li { border: 1px solid red; } 


.custom ul.menu li ul.submenu li.item a { } 


/*Hacking the submenu to make children work when a subpage is viewed*/ 

.custom ul.menu li ul.submenu li.item a { display: inline; } 
.custom ul.menu li ul.submenu li.item a { border: 1px solid yellow; } 
.custom ul.menu li.current-parent ul.submenu { border: 1px solid blue;} 
.custom ul.menu li.current-parent ul.submenu li.item a { border: 1px solid white; } 

.custom ul.menu li.current ul.submenu { 
background-color: #444444; 
padding: 10px; 
width: 500px; 
} 

.custom ul.menu li.current ul.submenu li.item { 
display: inline; 
white-space: nowrap; 
} 

.custom ul.menu li.current ul.submenu li.item a { 
background-color: transparent; 
display: inline; 
} 


.menu ul, .menu ul li { 
width: 18em; 
} 


.custom ul.menu li.current ul.submenu li.item:after { 
content: "/"; 
font-size: 14px; 
} 

.custom ul.menu li.current ul.submenu li:last-child:after { 
content: ""; 
} 

/*Annoyingly each individual submenu has to be positioned separately*/ 
.custom ul.menu li.current ul.submenu-1 { 
position: absolute; 
left: -110px; 
} 

可能有人用一个更合乎逻辑的大脑和眼睛更好比我看看好吗？谢谢！

的页面是在这里：http://dirtydeals.org.uk/about/subnavigation-page/

Answer 1

你可以很容易地实现，使用条件标签从wordpress。对于例如如果页面不是“About”，以下代码将显示“Blog”

<ul class="menu"> 
<li class="tab tab-home"><a href="http://dirtydeals.org.uk">Home</a></li> 
<li class="tab tab-1 current-parent"><a href="http://dirtydeals.org.uk/about/"  title="About">About<!--[if gte IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="submenu submenu-1"> 
<li class="item item-1 current"><a href="http://dirtydeals.org.uk/about/subnavigation- page/" title="Subnavigation page">Subnavigation page</a></li> 
<li class="item item-2"><a href="http://dirtydeals.org.uk/about/sub-page/" title="Sub- page">Sub-page</a></li> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="tab tab-2"><a href="http://dirtydeals.org.uk/action/"  title="action">action</a></li> 
<li class="tab tab-3"><a href="http://dirtydeals.org.uk/media/" title="Media">Media<!--[if gte IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 
<ul class="submenu submenu-1"> 
<?php if (!is_page('about')) { ?> 
<li class="item item-3"><a href="http://dirtydeals.org.uk/media/sample-page-2/"  title="Sample Page">Blog</a></li> 
<?php } ?> 
</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]-->