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用于为用户所在的Main（父）和Sub（子）页面着色。

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

现在，Parent和Child li菜单元素都具有正确的样式，但我无法弄清楚如何保持子菜单的打开。

你们都建议什么？

亲切的问候，奇

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/

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

1 个答案: