Блог

Страница, о которой идет речь: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

Прямо сейчас как родительский, так и дочерний элементы меню li имеют правильный стиль, но я не могу понять, как сохранить подменю открытым.

Что бы вы все предложили?

С уважением, Клинт

Вам нужно изменить это, чтобы оно отображало подменю и при наведении курсора:

 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 /