※ ChatGPTを利用し、要約された質問です(原文:ドロップダウンメニューを作るこのCSSどこが変?)
2012/01/07 00:48
お世話になります。
Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様をCSSで作りたいと思っています。添付ファイルのように、ボタン画像の下にまたメニュー項目(background-imageがついてくる)が展開していくよくある仕様です。
ネットでの情報を参考にしながら、書いたソースが以下のものですが、
問題は(1)ダウンメニューにしたいのにむしろ上部へ表示される
(2)テキスト分しか表示されない、きちんと画像全体を表示させたい!
個人的にもいろいろ試行錯誤してみましたが、どうも分かりませんでした。
もしかしたら、ものすごく基本的なところでつまずいているかもしれませんが、どうかご容赦ください。
もしよろしければアドバイスお願いします。
HTML---
<div id="global_nav">
<ul>
<li><a href="#"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_07.gif" alt="Aボタン" class="btn"/></a>
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">営業所</a></li>
</ul>
</li>
<li><a href="#"><img src="images/button_08.gif" alt="Bボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_08.gif" alt="Cボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_08.gif" alt="Dボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_08.gif" alt="Eボタン" class="btn"/></a></li>
</ul>
</div>
CSS---
#global_nav {
float:right;
width:720px;
margin:0;
padding-right:15px;
}
#global_nav img {
float:left;
display:block;
border:0;
}
#global_nav ul {
list-style:none;
margin:0;
padding:0;
}
#global_nav li {
min-width:120px;
white-space:nowrap;
float:left;
}
#global_nav ul ul {
display:none;
position:absolute;
z-index:10;
padding-top:2px;
}
#global_nav ul ul a {
font-family:"MS Pゴシック", "ヒラギノ角ゴ Pro W3", sans-serif;
font-size:0.75em;
color:#FFF;
background-image:url(../images/dawnmenu_button.gif);
height:40px;
width:120px;
text-decoration:none;
text-align:center;
padding:20px 10px 0 10px;
}
#global_nav li li {
clear:left;
position:relative;
width:100%
}
#global_nav ul li:hover > ul {
display:block;
}
質問の原文を表示する
お礼
いつもありがとうございます。 >回り道のようですが、実際はもっとも早い方法です。 本当ですね、理解して記述するとしないのとでは応用力が全く違いますよね。基本的なところで足踏みしていますが、地道に勉強していきたいと思います。 ありがとうございました。