CSS Hover anpassen einen Menüpunkt

Question

HTML:

<div class="container-fluid nav-con"> 
     <div class="navbar-header"> 

     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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="#">Navigation</a> </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
<ul id="menu-header" class="nav navbar-nav"> 
    <li id="menu-item-1368" class="menu-item menu-item-type-post_type 
menu-item-object-page menu-item-1368"> 
<a href="http://localhost/www/">Home</a></li> 

<li id="menu-item-1632" class="menu-item menu-item-type-post_type menu-item-object-page 
menu-item-1632"> 
<a href="http://localhost/www/artists/">Artists</a></li> 

<li id="menu-item-1369" class="menu-item menu-item-type-post_type menu-item-object-page 
menu-item-1369"> 
<a href="http://localhost/www/store/">Store</a></li> 

<li id="menu-item-3569" class="bp-menu bp-profile-nav menu-item menu-item-type-custom 
menu-item-object-custom menu-item-3569"> 
<a href="http://localhost/www/members/">Members Area</a></li> 

</ul></div></div> 
</nav> 

CSS:

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { 
     border: 0; 
     color: #000 !important; 
     background: #ddd; 
     text-shadow: 0 -1px 1px #fff; 
} 

Above CSS gilt für alle Menüpunkte, auf Hover Hintergrund #DDD der Menüpunkt macht und ein Textfarbe von Schwarz.

Jetzt versuche ich die CSS auf einen bestimmten Menüpunkt zu ändern - „Mitgliederbereich“

ich dies mit ‚Menü-item-3569‘ versucht, aber es funktioniert nicht

.navbar-default .menu-item-3569 .navbar-nav>li>a:focus, .navbar-default .menu-item-3569 
.navbar-nav>li>a:hover { 
     color: #EC442F !important; 
} 

Ich denke, da dies vielschichtig ist, verwechselt es mich mit der richtigen Syntax. Irgendeine Hilfe?

Answer 1

In CSS wird die . eine class verwendet, um anzuzeigen.

menu-item-3569 ist ein id - es wird mit einem # angezeigt.

Folglich statt:

.navbar-default .menu-item-3569 .navbar-nav>li>a:focus, 
.navbar-default .menu-item-3569 .navbar-nav>li>a:hover 

Versuchen:

.navbar-nav li#menu-item-3569 a:focus, 
.navbar-nav li#menu-item-3569 a:hover { 
     color: #EC442F; 
}