CSSドロップダウンメニュー

Question

私は、順序付けられていないリストを使用してドロップダウンメニューを作成する際のアドバイスを探しています。私は次のCSSとHTMLを使って、水平で並べ替えられていないリストを得ることができました。いくつかのメニューでドロップダウンメニューが表示されるようにしたいと思います。

私は複数の異なる方法を試してきており、それを正しく行うことができませんでした。

CSS

#nav li { 
    display: inline; 
    padding-right: 22px; 
    vertical-align: middle; 
    text-align: center; 


} 

#nav li a { 
    color: #f9f7ee; 
    background-image:url(images/bullet.gif); 
    background-repeat:no-repeat; 
    padding-left: 16px; 
    text-decoration: none; 
} 

#nav li a:hover { 
    background-image:url(images/bulletsolid.gif); 
    background-repeat:no-repeat; 
    padding-left: 16px; 
    color: #f9f7ee; 
} 

HTML

<ul id="nav"> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Teaching</a></li> 
    <li><a href="#">Performing</a></li> 
    <li><a href="#">Media</a></li> 
    <li><a href="#">Blog</a></li> 
    <li><a href="#">Links</a></li> 
    <li><a href="#">Contact</a></li> 
</ul> 

Answer 1

これはあなたの順不同リストを入れ子にし、親李が推移するまで、ネストされたものを隠し関与CSSであまりにもハードではありません。 Aboutの下にドロップダウンしたい場合の簡単な例です。あなたのhtmlはそうそうです。

<ul id="nav"> 
<li><a href="#">About</a> 
    <ul> 
    <li><a href="#">drop down below about 1</a></li> 
    <li><a href="#">drop down below about 2</a></li> 
    </ul> 
</li> 
</ul> 

#nav ul { 
display: none; 
} 

#nav li:hover > ul { 
display: block; 
} 

親ウルのliが基本的に浮かび上がるまで、これは子ウルを隠すでしょう。離れて

Answer 2

CSS accesibile構築にご興味を持って、リストをチェックアウトする場合 http://www.alistapart.com/articles/horizdropdowns/ あり良いの規格のための私のお気に入りのサイトの一つと適切なCSSの基礎