html - css/html での単純なマウスオーバーの問題

Question

私はhtmlとcssが初めてで、オプションを持つドロップダウンimg/boxをどのように作成するのか疑問に思っていました。これが私が話していることの例です。

この例では、コミュニティ ボタンにカーソルを合わせると、オプションのリストが表示されます。cssでこれを達成する方法はありますか?

前もって感謝します。

Answer 1

これを参照してください (CSS と HTML のみを使用)

HTML

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a> 
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>​

CSS

ul#navlist { font-family: sans-serif; }

ul#navlist a
{
font-weight: bold;
text-decoration: none;
}

ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

ul#navlist li { float: left; }

ul#navlist li a
{
color: #ffffff;
background-color: #003366;
padding: 3px;
border: 1px #ffffff outset;
}

ul#navlist li a:hover
{
color: #ffff00;
background-color: #003366;
}

ul#navlist li a:active
{
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
}

ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }

ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}

ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}

ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}

ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }​

Working DEMO

参照

Answer 2

これをチェックして

30 個の Jquery アニメーション ドロップダウン メニュー

Answer 3

このページを試してみてください... cssMenuMaker いくつかの種類のメニューがあり、最も好きなものを選び、好きな色とスタイルを設定してダウンロードします。画像と css が含まれています... お役に立てば幸いです...

Answer 4

マウス イベントのリスト html5 http://www.w3schools.com/html5/html5_ref_eventattributes.asp