CSS Drop Down Menu - How to target Child Element?

Page in Question: http://dev.cd-duplication-in-the-uk.com/disc-printing/screen/

http://jsfiddle.net/7maSx/2/ -- I would like the menu with the blue sub menu to always show

I have a 100% CSS Menu similar to this example which has been developed into a WordPress 3.0 menu for a theme I've been developing...

<nav class="main">
 <ul>

   <li>Main 1
     <ul>
       <li>Sub 1</li>
       <li>Sub 2</li>
       <li>Sub 3</li>
     </ul>
   </li>

   <li>Main 2
     <ul>
       <li>Sub 1</li>
       <li>Sub 2</li>
     </ul>
    </li>

   <li>Main 3</li>

 </ul>
</nav>

With the following (relevant) CSS for form/function

nav.main ul li { display: inline; float: left; list-style: none; }
nav.main ul:first-child { position: relative; }/* for the position of sub menus */
nav.main li ul { display: none; position:absolute; top: 30px; left: 0px; z-index: 10; }
nav.main li:hover ul  { display: block; }

...and this CSS to color the Main (parent) and the Sub(child) page which the user is on.

ul.menu li.current-menu-parent a {color: #开发者_开发知识库036;}
ul.sub-menu li.menu-item a {color: #999;}
ul.sub-menu li.current_page_item a {color: #036;}

I'm looking for a way to keep the Sub Menu open if one of the li elements is the .current_page_item

Right now both the Parent and Child li menu elements have the correct styling, but I can't figure out how to keep the sub-menu open.

What would you all suggest?

Kind Regards, Clint

---

You need to change this so it shows the sub-menu on hover too:

nav.main li:hover ul, nav.main li:hover ul li  { display: block; }

But there is a gap between the main and sub menus you'll have to close-up as well. If the cursor falls in the gap the menu will close.

nav.main li ul { display: none; position:absolute; padding-top: 30px; left: 0px; z-index: 10; }

See: http://jsfiddle.net/aBtbN/