CSS 下拉菜单 - 如何定位子元素？

Question

有问题的页面: http://dev.cd-duplication-in-the-uk.com/disc-printing/screen/

http://jsfiddle.net/7maSx/2/ -- 我希望带有蓝色子菜单的菜单始终显示

我有一个类似于此示例的 100% CSS 菜单，它已被开发成我一直在开发的主题的 WordPress 3.0 菜单...

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

使用以下(相关的)CSS 形式/功能

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

...这个 CSS 为用户所在的主(父)页面和子(子)页面着色。

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

如果 li 元素之一是 .current_page_item，我正在寻找一种保持子菜单打开的方法

现在父菜单元素和子菜单元素都具有正确的样式，但我不知道如何保持子菜单打开。

你们有什么建议？

亲切的问候， 克林特

Answer 1

您需要更改它以便它在悬停时也显示子菜单:

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

但是主菜单和子菜单之间存在间隙，您也必须将其关闭。如果光标落在间隙中，菜单将关闭。

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

参见:http://jsfiddle.net/aBtbN/