スプライトナビゲーションのドロップダウンメニュー

Question

1つの画像（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では使用しません。指定したとして、李にULを挿入し、相対

：

Answer 2

（float:leftを除く）#nav李に位置を与えます。スタイル#nav ul li ul位置：絶対。それに幅と高さ、そして頂点と左の位置をpxで与えます。背景色を指定します。 （それにディスプレイnoneを設定する前に表示されるテスト）。ディスプレイにそれを設定していない：#nav李aの上に次に何

：それ表示しますULホバー：ブロック