target 'toggle' links in Bootstrap navigation

Question

Я использую фреймворк Bootstrap 3 для создания nag. Я могу настроить таргетинг на обычный неф с помощью моего css, но не могу настроить таргетинг на ссылки, когда они находятся в режиме переключения/перемещения. * Я использую Bootstrap CDN. привезены из хозяина

HTML

<div class="container"> 
<div class="row"> 

    <nav class="navbar navbar-custom" role="navigation"> 

     <!-- Brand and toggle get grouped for better mobile display --> 

      <div class="navbar-header"> 

       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       <a class="navbar-brand" href="<?php echo home_url(); ?>"></a> 

      </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 

      <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right"> 
       <?php /* Primary navigation */ 
        wp_nav_menu(array(
        'menu' => 'top_menu', 
        'depth' => 2, 
        'container' => false, 
        'menu_class' => 'nav navbar-nav', 
        //Process nav menu using our custom nav walker 
        'walker' => new wp_bootstrap_navwalker()) 
        ); 
       ?> 
      </div> 
    </nav> 

</div> 
</div> <!--/container --> 

CSS - изменение значений в этих полях не влияет на тип.

.navbar-custom ul.dropdown-menu { 
} 

.navbar-custom .dropdown-menu li a { 
} 

.navbar-custom .dropdown-menu li a:hover { 
    background-color: red; 
} 

изменение, что CSS мне нужно, чтобы иметь возможность стилизовать выпадающие ссылки свойств

Answer 1

простой самозагрузки NavBar с выпадающим меню li имеет следующую структуру:

<li class="dropdown open"> 
    <a aria-expanded="true" href="#lala" class="dropdown-toggle" data-toggle="dropdown"> 
     Java 
     <b class="caret"></b> 
    </a> 
    <ul class="dropdown-menu" role="listbox"> 
     <li><a href="#lala1" role="option">jmeter</a></li> 
     <li><a href="#lala2" role="option">EJB</a></li> 
     <li><a href="#lala3" role="option">Jasper Report</a></li> 
     <li><a href="#" role="option">One more separated link</a></li> 
    </ul> 
</li> 

и самозагрузки использует следующий селектор для добавления стилей в выпадающие элементы IE В a теги в раскрывающемся списке:

.dropdown-menu > li > a { 
    display: block; 
    padding: 3px 20px; 
    clear: both; 
    font-weight: 400; 
    line-height: 1.42857; 
    color: #333; 
    white-space: nowrap; 
} 

парения и фокус стили, как так:

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover { 
    color: #262626; 
    text-decoration: none; 
    background-color: #F5F5F5; 
} 

Обратите внимание, как бутстраповский с помощью селектора > и вы НЕ! ,

Также в мобильном режиме самозагрузки изменение селектора следующим образом:

.navbar-default .navbar-nav .open .dropdown-menu > li > a { 
    color: #777; 
} 

.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { 
    color: #333; 
    background-color: transparent; 
} 

Так может быть вы можете сделать что-то вроде:

.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { 
    // your code goes here . 
} 

.navbar-default .navbar-nav .open .dropdown-menu > li > a { 
     // your code goes here . 
    }