스프라이트 탐색 메뉴에서 드롭 다운

Question

하나의 이미지 (CSS 스프라이트)를 기반으로하는 탐색 메뉴에 드롭 다운 메뉴를 넣어야합니다. 나는 몇 시간 동안 노력해 왔지만 그걸 알아낼 수는 없다. 다음은 HTML입니다.

<ul id="nav"> 
       <li class="nav-1"><a href="/">Storage Auctions</a></li> 
       <li class="nav-2"><a href="/blog.php">Blog</a></li> 

       <li class="nav-3"><a href="/about.php">About</a> 



       </li> 

       <li class="nav-4"><a href="/contact.php">Contact</a></li> 
       <li class="nav-5"><a href="/faq.php">FAQ</a></li> 
      </ul> 

"정보"링크 아래로 이동하려면 드롭 다운이 필요합니다. 나는 그것이 'li'태그에 들어가야한다는 것을 알았지 만 CSS를 올바르게 얻을 수는 없습니다. 이 스프라이트의 현재 CSS는 다음과 같습니다.

ul#nav { 
    margin:75px 0 0 0; 
    padding:0; 
    list-style:none; 
    clear: both;  
} 

#nav li { 
    overflow:hidden; 
    text-indent:-9999px; 
    display:inline; 
    float:left; 
    width: 398px; 
} 

#nav li a { 
    background:url(../images/nav-sprite.jpg) no-repeat; 
    width: 398px; 
    height: 40px; 
    display:block; 
} 


#nav li.nav-1 {width:85px; height:40px;} 
#nav li.nav-1 a:hover{background-position:0px -40px;} 

#nav li.nav-2 {width:80px; height:40px;} 
#nav li.nav-2 a:hover{background-position:-85px -40px;} 
#nav li.nav-2 a{background-position:-85px 0px;} 

#nav li.nav-3 {width:82px; height:40px;} 
#nav li.nav-3 a:hover{background-position:-165px -40px;} 
#nav li.nav-3 a{background-position:-165px 0px;} 

#nav li.nav-4 {width:97px; height:40px;} 
#nav li.nav-4 a:hover{background-position:-247px -40px;} 
#nav li.nav-4 a{background-position:-247px 0px;} 

#nav li.nav-5 {width:54px; height:40px;} 
#nav li.nav-5 a:hover{background-position:-344px -40px;} 
#nav li.nav-5 a{background-position:-344px 0px;} 

어떤 도움을 주시면 감사하겠습니다!

Answer 1

모든 스타일을 A 태그에 넣고, LI에는 넣지 마십시오.

Answer 2

(float:left 제외) #nav 리에게 위치 보내기를 삽입 지정으로 리튬의 UL

상대를. 스타일 #nav ul li ul 위치로 : 절대. 너비와 높이, 그리고 위쪽과 왼쪽 위치를 px로 지정하십시오. 및 배경색. (표시 없음을 설정하기 전에 표시되는 테스트). 디스플레이로 설정하지 : #nav 리튬 A의 그런 것도

: 그것을 표시 할 UL 가져 : 블록