2012-02-17 2 views
1

Я уже много недель борюсь с этой проблемой и очень хочу найти решение этой проблемы с CSS. Если это вообще возможно, как сделать подменю оставаться видимым, когда родитель активен?Активное свойство в подменю в WordPress

CSS отлично работает с свойством: hover, но не может понять, как сделать блок подменю видимым с помощью: active.

<nav id="menu" role="navigation"> 
    <?php wp_nav_menu(); ?> 
</nav><!-- #menu --> 
#menu ul li:hover ul.sub-menu, 
#menu ul li:hover ul.sub-menu li, 
#menu ul li:hover ul.sub-menu li a { display: block; } 

бы реально оценить некоторую помощь или какие-либо идеи на все, так что я не тратить больше времени на попытки решить эту проблему, если она не может быть решена только с помощью CSS.

С уважением, Bellisia

Edit:

<nav id="menu" role="navigation"> 
    <div class="menu-headmenu-container"> 
     <ul id="menu-headmenu" class="menu"> 
      <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-17"> 
       <a href="http://yyy.com/">Home</a> 
      </li> 
      <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"> 
       <a href="http://yyy.com/services/">Services</a> 
       <ul class="sub-menu"> 
        <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"> 
         <a href="http://yyy.com/contact/">Contact</a> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</nav><!-- #menu --> 
+0

Как выглядит HTML-код для навигации, т.е. когда он сгенерирован Wordpress и отправлен в браузер? –

+0

Добавлено это выше :) – Bellisia

+0

@StephenHarris Это то, что у нас есть _close_ голосов (вне темы) или _flag_ (переход к SO) для. – kaiser

ответ

1

При нажатии на контакт (скажем к югу нав пункта), (* current_page_item *) класс должен быть применен к этому литий?

в этом случае, вы не могли бы просто использовать ..

#menu ul li ul.sub-menu li.current_page_item { display: block; } 

, который указывает на то, что его в использовании и отображается в виде блока на этой странице загрузки?

+0

Я пробовал это, но он не работает :(Любые другие идеи? – Bellisia

+0

Я пробовал, но это не активирует его. Поскольку я уже использую: hover, он снова исчезает. – Bellisia

0

Вам нужно будет сыграть с позиционированием подменю, но вот скрипка, показывающая, как это сделать только с помощью CSS. Когда вы наведите указатель мыши на ссылку 2, вы увидите, что ребенок <ul> появляется с тремя ссылками.

http://jsfiddle.net/ryancowles/63XBy/

0

Селектор "Child Combinator" является то, что вы ищете, попробуйте ниже CSS.

.current_page_item > ul { display: block; }

Единственное ограничение в том, что селектор «Детский комбинатор» отберет детей только один уровень глубокий, поэтому он не будет работать для вложенных подменю х.

НТН

P.S: Я предполагаю здесь, что у Вас есть установка Wordpress применить класс «current_page_item» к пункту меню родительского, которая была нажата.

+0

Я тоже это пробовал, но это не так. Я работаю, и я предполагаю, что это из-за эффекта наведения, который я использую. Мне просто нужно, чтобы он оставался там, на что-то щелкнули. – Bellisia

0

После бесконечных часов я понял, что я не использовал> правильно, и вот как это в конечном итоге выглядит как:

#menu ul.menu > li.current_page_item > ul.sub-menu { display: block; } 

работает как шарм! Но это только для родителей, я не могу получить элементы подменю, чтобы оставаться видимыми при нажатии, какие-либо идеи?

Смежные вопросы