CSS 수직 플라이 아웃 메뉴에서 텍스트를 동일한 색상으로 유지

나는 당신의 도움이 필요합니다.CSS 수직 플라이 아웃 메뉴에서 텍스트를 동일한 색상으로 유지

아래의 CSS 마크 업을 수정하여 사용자 선택을 제외하고 색상 흰색이 표시되도록하려면 어떻게해야합니까? 지금과 같이 섹션이 올라 왔을 때 텍스트는 마지막으로 선택된 부분을 제외하고는 파란색으로 유지됩니다. 파란색 색상은 사용자가 선택한 동안 흰색이 아닙니다. 앵커 전체 하위 메뉴를 감싸는 곳과 같이, 나는 그것을 보았다

enter image description here

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title></title> 
<style type="text/css"> 
#navigation { 
    width: 150px; 
    font-size: 0.75em; 
} 
#navigation ul { 
    margin: 0px; 
    padding: 0px; 
} 

ul.top-level { 
    background: rgb(238,238,238); 
} 

#navigation li { 
    list-style: none; 
} 
ul.top-level li { 
    border-bottom: #fff solid; 
    border-top: #fff solid; 
    border-width: 1px; 
} 

#navigation a { 
    color: rgb(41,83,118); 
    cursor: pointer; 
    display:block; 
    height:25px; 
    line-height: 25px; 
    text-indent: 10px;     
    text-decoration:none; 
    width:100%; 
} 
#navigation a:hover{ 
    text-decoration:underline; 
     color: #fff; 
} 
#navigation li:hover { 
    background: rgb(85,85,85); 
    position: relative; 
} 

ul.sub-level { 
    display: none; 
} 
li:hover .sub-level { 
    border: #fff solid; 
    border-width: 1px; 
    display: block; 
    position: absolute; 
    left: 150px; 
    top: 0px; 
} 
ul.sub-level li { 
    border: none; 
    float:left; 
    width:150px; 
} 
#navigation .sub-level { 
    background: rgb(238,238,238); 
} 
#navigation .sub-level .sub-level { 
    background: rgb(238,238,238); 
} 

li:hover .sub-level .sub-level { 
    display:none; 
} 

.sub-level li:hover .sub-level { 
    display:block; 
    position: absolute; 
    left: 150px; 
} 

</style> 
</head> 
    <body> 
     <div id="navigation"> 
      <ul class="top-level"> 
       <li><a href="#">Home</a> 
        <ul class="sub-level"> 
         <li><a href="#">Sub Menu Item 1</a> 
       </li> 
         <li> 
          <a href="#">Sub Menu Item 2</a> 
          <ul class="sub-level"> 
           <li><a href="#">Sub Sub Menu Item 1</a></li> 
           <li><a href="#">Sub Sub Menu Item 2</a></li> 
           <li><a href="#">Sub Sub Menu Item 3</a></li> 
           <li><a href="#">Sub Sub Menu Item 4</a></li> 
          </ul> 
         </li> 
         <li><a href="#">Sub Menu Item 3</a></li> 
         <li><a href="#">Sub Menu Item 3</a></li> 
        </ul> 
       </li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">FAQ</a> 
        <ul class="sub-level"> 
         <li><a href="#">Sub Menu Item 1</a></li> 
         <li> 
          <a href="#">Sub Menu Item 3</a> 
          <ul class="sub-level"> 
           <li><a href="#">Sub Sub Menu Item 1</a></li> 
           <li><a href="#">Sub Sub Menu Item 2</a></li> 
           <li><a href="#">Sub Sub Menu Item 3</a></li> 
           <li><a href="#">Sub Sub Menu Item 4</a></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">News</a> 
        <ul class="sub-level"> 
         <li><a href="#">Sub Menu Item 1</a> 
          <ul class="sub-level"> 
           <li><a href="#">Sub Sub Menu Item 1</a></li> 
           <li><a href="#">Sub Sub Menu Item 2</a></li> 
           <li><a href="#">Sub Sub Menu Item 3</a></li> 
           <li><a href="#">Sub Sub Menu Item 4</a></li> 
          </ul> 
         </li> 
         <li><a href="#">Sub Menu Item 2</a></li> 
         <li><a href="#">Sub Menu Item 3</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </body> 
</html>

출처

2013-08-29 John Smith

추가하여 CSS의 끝에 다음과 같은 : (Working jsFiddle) 호기심에서

#navigation li:hover > a{ /* Thanks @ExplosionPills */ 
    color:white; 
}

출처

2013-08-29 18:17:20

이렇게하면 하위 목록 메뉴 항목도 흰색으로 바뀝니다. 설명에 대한 내 대답을보고 –

나는 그것을 좋아한다! 그것은 작동합니다. 나는 받아 들일 것이다! CSS를 많이 배울 수 있습니다. 그것의 대부분은 독학했다 Youtube videos –

@ExplosionPills 네, 물론 내 편이 바보 같은 실수. –

아래 그림을 참조하십시오

<a href="#"> 
    News 
    <ul class="sub-level"> 
     ... 
    </ul> 
</a>

이 방법을 때 하위 메뉴 위로 마우스를 가져 가면 상위 앵커도 여전히 활성 상태입니다.

출처

2013-08-29 18:15:07 Quantastical

변경 #navigation a:hover에서 #navigation li:hover > a으로 변경하십시오. <a>은 하위 목록의 상위 항목이 아닙니다. 하위 목록 위로 마우스를 가져 가면 목록 위에 마우스를 올릴 수 있습니다. 자식 선택기 (>)가 필요하거나 그렇지 않으면 a 하위 목록에서 자식이 바람직하지 않습니다.

http://jsfiddle.net/nvEza/

출처

2013-08-29 18:15:25

, 않습니다 IE7 지원': 비 앵커 요소에 hover'? – Quantastical

@ MrSlayer 나는 그렇게 믿는다 –

. IE7은 표준 모드입니다. 이것은 아마도 하위 메뉴를 앵커로 래핑하는 것보다 나은 해결책 일 것입니다. – Quantastical

-2

를 사용하여 그 상태로 아이의 색상을 설정 부모에 가져가.

#navigation .top-level:hover li a{color:#fff;}

출처

2013-08-29 18:17:15

목록을 올리면 모든 메뉴 항목이 흰색으로 바뀝니다. –

CSS 수직 플라이 아웃 메뉴에서 텍스트를 동일한 색상으로 유지

답변

관련 문제