CSS는

Question

는 내가 코드 HTML 코드가

.wrapper-dropdown-2 { 
position: relative; 
width: 200px; 
margin: 0 auto; 
padding: 10px 15px; 

background: #fff; 
border-left: 5px solid orange; 
cursor: pointer; 
text-align: left; 
cursor: pointer; 
outline: none; 

} 

.wrapper-dropdown-2:after { 
    content: ""; 
    width: 0; 
    height: 0; 
    position: absolute; 
    right: 16px; 
    top: 50%; 
    margin-top: -3px; 
    border-width: 6px 6px 0 6px; 
    border-style: solid; 
    border-color: grey transparent; 

} 
.dropdown { 
    display:none; 
} 
.wrapper-dropdown-2:hover ul.dropdown { 
    position: absolute; 
    display:block; 
    top: 100%; 
    left: -5px; 
    right: 0px; 
    background: white; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
    list-style: none; 
    opacity: 0; 
    pointer-events: none; 
} 
.wrapper-dropdown-2 .dropdown li a { 
    display: block; 
    text-decoration: none; 
    color: #333; 
    border-left: 5px solid; 
    padding: 10px; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 

http://jsfiddle.net/pvt3e/

을 그리고 난에 가져가 마우스를 시도 : 드롭 다운을 열어 로그인하지만 그럴 수 없습니다! js와 작업 할 수 없습니다. 1.8.2에 문제가 있기 때문에 CSS가 포함 된 솔루션을 찾을 수 있다고 생각합니다.

Answer 1

그냥 교체 스타일에서 가져

.dropdown:hover { 
    /* Size & position */ 
    position: absolute; 
    display:block; 
    top: 100%; 
    left: -5px; 
    right: 0px; 

    /* Styles */ 
    background: white; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
    list-style: none; 

    /* Hiding */ 
    opacity: 0; 
    pointer-events: none; 
} 

내 CSS로

및 결과 받기

.wrapper-dropdown-2:hover > .dropdown { 
    position: absolute; 
    display:block; 
    left: -45px; 
     background: white; 
     top:24px; 
} 

Answer 2

jquery로 연결되는 링크와 함께 자바 스크립트를 초기화해야합니다. Codrops의 드롭 다운을 사용하여 소스를 다운로드하지 않는 이유는 무엇입니까?

Answer 3

마우스를 가져갈 때 드롭 다운이 표시되도록 입력 코드를 추가하지 않았습니다. 호버에 CSS를 추가하십시오.

.wrapper-dropdown-2:hover .dropdown 
{ 
    display:block; 
} 

Live Demo

Answer 4

도 .dropdown 제거하려면이

.wrapper-dropdown-2:hover ul{ 
    display:block; 
} 

updated jsFiddle File

을 시도 : 당신이 CSS