드롭 다운 메뉴에서 정렬되지 않은 목록 요소 스타일 지정

Question

현재 중첩되지 않은 목록에서 드롭 다운 메뉴를 만들려고합니다. 나는 메뉴를 가지고 있지만 스타일에 관해서는 몇 가지 문제가 있습니다. 드롭 다운을 트리거하는 전체 링크는 클릭 가능하며 흰색 배경의 파란색 배경이 있어야합니다. 그러나 드롭 다운 요소는 전체 탐색 컨테이너에서 상속 된 회색 배경을 가져야합니다. 내가해야 할 일은 텍스트 색상을 수정하는 것인데, 내가 시도하는 모든 방법은 항상 드롭 다운 텍스트 색상과 제목 링크 색상을 수정합니다.

내 CSS는 현재 디스플레이의 예와 메뉴를 생성하는 데 사용되는 HTML과 함께 아래에서 찾을 수 있습니다

:

/*CSS*/ 

#coolMenu, 
#coolMenu ul { 
list-style: none; 
} 

#coolMenu { 
float: right; 
} 

#coolMenu > li { 
float: left; 
} 

#coolMenu li a { 
display: block; 
/*height: 2em; 
line-height: 2em; 
*/ 
/*padding: 0 1.5em;*/ 
text-decoration: none; 
color: #ffffff; 
} 

#coolMenu ul { 
position: absolute; 
display: none; 
z-index: 999; 
} 

#coolMenu li:hover ul { 
display: block; 
} 

.dropdown a li{ 
color: #124162 !important; 
} 

#style_me > li > a{ 
color: #124162 !important; 
} 

/HTML을/

 <nav id="navigation" class="navigation"> 

     <ul> 
      <li class="current"><a href="#">Home</a></li> 
      <li><a href="#">Who Are We?</a></li> 
      <li><a href="#">Why Join Us?</a></li> 
      <li><a href="#">Contact Us</a></li> 
     </ul> 


    /* This is the menu element that needs styling */ 

     <ul id="coolMenu"> 
          /* THis should be blue background white text */ 
      <li><a href="#" class="donate">Login/Register</a> 
       <ul id="style_me"> 
        /* These should be grey background blue text */ 
             <li><a href="#">Link 1</a></li> 
             <li><a href="#">Link 2</a></li> 
             <li><a href="#">Link 3</a></li> 
             <li><a href="#">Link 4</a></li> 
             <li><a href="#">Link 5</a></li> 
             <li><a href="#">Link 6</a></li> 
             <li><a href="#">Link 7</a></li> 
            </ul> 
       </li> 
     </ul> 

      </nav> 

어떤 도움이 될 것입니다 대단히 감사합니다. CSS와 메모리를 조금씩 사용해야했기 때문에 2 년이 지났습니다.

Answer 1

이것은 당신이 원하는 일을해야합니다

#style_me li a { 
    color: #124162 !important; 
} 

(단지 공간 대신 ​​>) 그리고는, 아마도 당신이 !important 것이 필요하지 않습니다.

업데이트 : 게시 한 내용이 무시되는 경우 더욱 구체적인 CSS 선택기를 사용해보세요.

#coolMenu li #style_me li a { 
     color: #124162 !important; 
}