ｳｪﾌﾞ作成について､ｸﾘｯｸしたとき､ﾒﾆｭｰを下に出す方法を教えて下さい｡｢利用中のｻｰﾋﾞｽ(右画像)｣のように､ｸﾘｯｸしたときに､ﾒﾆｭｰを下に表示させる…

ｳｪﾌﾞ作成について､ｸﾘｯｸしたとき､ﾒﾆｭｰを下に出す方法を教えて下さい｡
｢利用中のｻｰﾋﾞｽ(右画像)｣のように､ｸﾘｯｸしたときに､ﾒﾆｭｰを下に表示させる方法を教えて下さい｡
はてなﾀﾞｲｱﾘｰで表示できるものだと幸いです｡

JavaScriptを使えばできるんですけど､この機能はﾌﾟﾛｸﾞﾗﾑしたことがありません｡
僕はここまでです｡(ｸﾘｯｸしたら画像や文字が表示される↓)
http://ktskn.web.fc2.com/JavaSample_Englsh_04.htm

はてなﾀﾞｲｱﾘｰはJAVAScriptを消してしまう仕様なので､
やるとすればｽﾀｲﾙｼｰﾄによる切り替えになります｡

日記の中にそのまま書ける簡単な例を作ってみましたので､
細かい部分は実際に設置したい場所に合わせて調整してくださいな｡

<style>
 ul#pull_down_menu {
 position:absolute;
 background-color:#FFFFFF;
 }
 ul#pull_down_menu li {
 display:none;
 z-index:100000;
 }
 ul#pull_down_menu:hover li {
 display:block;
 }
</style>
<ul id="pull_down_menu">
 <a href="#">はてなﾘﾝｸ</a>
 <li>
 <img src ="http://www.hatena.com/images/favicon/bookmark.gif" />
 <a href="http://www.hatena.ne.jp/me/b/">はてなﾌﾞｯｸﾏｰｸ</a>
 </li>
 <li>
 <img src ="http://www.hatena.com/images/favicon/diary.gif" />
 <a href="http://www.hatena.ne.jp/me/d/">はてなﾀﾞｲｱﾘｰ</a>
 </li>
 <li>
 <img src ="http://www.hatena.com/images/favicon/question.gif" />
 <a href="http://www.hatena.ne.jp/me/q/">人力検索はてな</a>
 </li>
</ul>