CSS : 나는 유혹있을 때 드롭 다운 탐색 메뉴는 다음 코드에서

을 방문 드롭 다운 # 1 항목 # 1드롭 다운 # 1 번 항목의 호버 효과가 1 내가 그것을 유지하기 위해 필요로하는 곳에, 꺼집니다 그 메뉴 항목과 하위 항목이 나올 때까지CSS : 나는 유혹있을 때 드롭 다운 탐색 메뉴는 다음 코드에서

http://jsfiddle.net/kLDrG/

HTML 페이지

<!DOCTYPE html> 
<html> 
<head> 

<link rel="stylesheet" type="text/css" href="navmenu.css"> 

</head> 
<body> 

<div id="nav"> 
    <div id="nav_wrapper"> 
     <ul> 
      <li><a href="#">item #1</a> 
      </li> 
      <li> <a href="#">item #2</a> 
      </li> 
      <li> <a href="#">dropdown #1</a> 

       <ul> 
        <li><a href="#">dropdown #1 item #1</a> 
        </li> 
        <li><a href="#">dropdown #1 item #2</a> 
        </li> 
        <li><a href="#">dropdown #1 item #3</a> 
        </li> 
       </ul> 
      </li> 
      <li> <a href="#">dropdown #2</a> 

       <ul> 
        <li><a href="#">dropdown #2 item #1</a> 
        </li> 
        <li><a href="#">dropdown #2 item #2</a> 
        </li> 
        <li><a href="#">dropdown #2 item #3</a> 
        </li> 
       </ul> 
      </li> 
      <li> <a href="#">item #3</a> 
      </li> 
     </ul> 
    </div> 
    <!-- Nav wrapper end --> 
</div> 
<!-- Nav end --> 

</body> 
</html>

CSS 파일

다음과 같은 추가해야

#body { 
    padding: 0; 
    margin: 0; 
    font-family: Arial; 
    font-size: 17px; 
} 
#nav { 

} 
#nav_wrapper { 
    width: 960px; 
    margin: 0 auto; 
    text-align: left; 
} 
#nav ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    position: relative; 
    min-width: 200px; 
} 
#nav ul li { 
    display: inline-block; 
} 
#nav ul li:hover { 
    background-color: #ffb108; 

} 

#nav ul li a{ 
    color: #ffb108; 
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif; 
    font-weight:bold; 
    display: block; 
    padding: 15px; 
    text-decoration: none; 
} 
#nav ul li a:visited{ 

    color:#FFF; 

    } 

#nav ul li a:hover{ 

    color:#FFF; 

    } 


#nav ul li:hover ul { 
    display: block; 
} 
#nav ul ul { 
    display: none; 
    position: absolute; 
    background-color: #ffb108; 

    border-top: 0; 
    margin-left: 0px; 
} 
#nav ul ul li { 
    display: block; 
} 
#nav ul ul li a{ 
    color: #FFF; 
} 
#nav ul ul li a:hover { 
    color: #333; 
}

출처

2014-07-17 Dilukshan Mahendra

그것을 얻을하지 않았다. 당신은'#nav ul ul li a : hover {color : # 333;}'을 검은 색으로 가지고 있습니다. 이걸 바꾸시겠습니까? –

@Alek JSFiddle 파일을 포함했습니다. –

#nav ul li:hover a { 
    color: #fff; 
}

는 A 태그에 공중 선회 리에서이 스타일 . 희망은 그것이 의미가 있습니다!

출처

2014-07-17 15:24:37 mattcouchman

이유는 : <li>이 아닌 <a>에 적용되는 색상을 변경하는 호버가 있기 때문입니다. <li>에 마우스를 올리면 <a> 스타일이 올바르게 작동합니다. CSS :

이

#nav ul li:hover a{ 

    color:#FFF; 

    }

JSFiddle Demo

출처

2014-07-17 15:25:40

위대한 !! 그것은 작동합니다 .. 고마워요 –

@DilukshanMahendra 기쁜 내가 도울 수있어! ;) –

CSS : 나는 유혹있을 때 드롭 다운 탐색 메뉴는 다음 코드에서

답변

관련 문제