Styling the Thesis dropdown menu with CSS

I'm using the Wordpress Thesis theme which comes with a standard dropdown menu which I want to turn into a two-tier horizontal menu. What I'd like to have is that when you click on a parent item, the children of that parent (but no other children) are visisble.

The structure is like this:

<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> 

I've got it working reasonably well, however, the problem is that I can't find a way to specifically target the child items specifically. If I hide 'Blog' when 'About' is viewed, then it also hides the child items of 'About' or hides the whole submenu when one of the children of 'About' is viewed.

Here's my 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;
}

Could someone with a more logical brain and better eye than me have a look please? Thanks!

The page is here: http://dirtydeals.org.uk/about/subnavigation-page/

You could easily achieve that using the conditional tags from wordpress. For e.g. the following code will show "Blog" only if the page is not "About"

<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]-->