Я использую тему Wordpress Thesis, которая поставляется со стандартным выпадающим меню, которое я хочу превратить в двухуровневое горизонтальное меню. Я бы хотел, чтобы при щелчке по родительскому элементу дети этого родителя (но не другие дети) были видны.Укладка выпадающего меню Thesis с помощью CSS
структура такова:
<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/