드롭 다운 탐색 (예 : 탐색) (순수 CSS)

Question

예를 제외한 모든 브라우저에서 정상적으로 작동하는 메뉴에서 작업하고 있습니다. 몇 가지가 조금 이상하고 빨리 완료되었지만 ie를 제외하고는 정상적으로 작동합니다. 아래쪽 막대로 이동하면 아래쪽 막대에 도달하기 전에 아무 것도 표시되지 않습니다. 저는 li과 ul을 둘 다 사용합니다. display : block;으로 마우스를 가져 가면 문제를 해결하는 방법을 알 수 없습니다.

나는 바이올린의 탐색을 넣어했습니다 내가 지금까지 시도했습니다 http://jsfiddle.net/vUxpE/22/

모든 작동하지 않았다. 왜 지금 당장 실마리가 없습니까?

#nav { 
    height:64px; 
    width:100%; 
    background:#f0f0f0; 
    background: -moz-linear-gradient(top, #f0f0f0 0%, #d3d5d2 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #d3d5d2)); 
    background: -webkit-linear-gradient(top, #f0f0f0 0%, #d3d5d2 100%); 
    background: -o-linear-gradient(top, #f0f0f0 0%, #d3d5d2 100%); 
    background: -ms-linear-gradient(top, #f0f0f0 0%, #d3d5d2 100%); 
    background: linear-gradient(to bottom, #f0f0f0 0%, #d3d5d2 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#d3d5d2', GradientType=0); 
    border:#e2e2e2 1px solid; 
    -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 1); 
    -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 1); 
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 1); 
} 
#nav ul { 
    padding:10px; 
} 
#nav li { 
    float:left; 
} 
#nav a { 
    color:#4d4d4d; 
    font-size:14px; 
    text-decoration:none; 
    margin-top:10px; 
    padding:10px; 
    padding-bottom:11px; 
    line-height:44px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
#nav a:hover { 
    background:url(../images/navbutton.png); 
    color:#fff; 
} 
#navtest li ul { 
    display:none; 
    z-index:100; 
    position:absolute; 
    margin:0; 
    padding:20px; 
    left:0; 
    width:494px; 
} 
#navtest li:hover ul { 
    display:block; 
} 
#navtest li ul:hover { 
    display:block; 
} 
#navtest li ul a { 
    color:#FFF; 
    font-size:11px; 
} 
#navtest li ul a:hover { 
    background:none; 
    text-decoration:underline; 
} 
.subnav { 
    background:url(../images/submenu.png) #000; 
    height:64px; 
    z-index:10; 
} 
.subnav li { 
    float:left; 
    margin:15px; 
} 
.subnav a { 
    color:#fff; 
    line-height:34px; 
    text-decoration:none; 
} 
.subnav a:hover { 
    text-decoration:underline; 
} 

HTML : 어쩌면 너희들은

CSS에 빛을 넣을 수 있습니다

<nav id="nav"> 
    <ul id="navtest"> 
     <li> <a href="#">News</a> 

       <ul> 
        <li> <a href="#">Latest</a> 

        </li> 
        <li> <a href="#">Archive</a> 

        </li> 
       </ul> 
     </li> 
     <li> <a href="#">Tournaments</a> 
       <ul> 
        <li> <a href="#">DSCL</a> 

        </li> 
        <li> <a href="#">Starcraft 2</a> 

        </li> 
        <li> <a href="#">League of Legends</a> 

        </li> 
       </ul> 
     </li> 
     <li> <a href="#">Media</a> 

       <ul> 
        <li> <a href="#">Photo's</a> 

        </li> 
        <li> <a href="#">Video's</a> 

        </li> 
        <li> <a href="#">Extra</a> 

        </li> 
       </ul> 
     </li> 
     <li> <a href="#">Partners</a> 

       <ul> 
        <li> <a href="#">DSCL</a> 

        </li> 
        <li> <a href="#">Knights</a> 

        </li> 
       </ul> 
     </li> 
     <li> <a href="#">About Us</a> 

     </li> 
     <li> <a href="#">Contact</a> 

     </li> 
    </ul> 
</nav> 
<div class="subnav"></div> 

Answer 1

안녕하세요 제거하십시오 마지막 subnav div의

및 #navtest 리 UL을 변경하고 이것을 시도

#navtest li ul { 
background: none repeat scroll 0 0 #000; 
display: none; 
left: 0; 
margin: 0; 
padding: 20px; 
position: absolute; 
top: 67px; 
width: 520px; 
z-index: 100; 

}