html,cssプルダウンメニューについて教えてください。
html,cssプルダウンメニューについて教えてください。
現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が
あり困っています。どなたか知識のある方、教えていただけると嬉しいです。
[問題点]
オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の
高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。
(分かりにく表現で申し訳ありません）
出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の
上に重なって表示させたいと思っています。
対処法がお分かりになる方、教えて頂けると幸いです。
[html]
<div id="main_menu">
<div id="navi">
<ul>
<li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'">
<a href="#"><IMG src="img/main_menu04.gif"></a>
<ul class="sub">
<li><a href="#">サブメニュー 1</a></li>
<li><a href="#">サブメニュー 2</a></li>
</ul>
</li>
<li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'">
<a href="#"><IMG src="img/main_menu05.gif"></a>
<ul class="sub">
<li class="navi_menu1"><a href="#">サブメニュー 1</a></li>
<li class="navi_menu1"><a href="#">サブメニュー 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
[css]
#navi {
width:993;
margin:0 auto;
border:0px solid red;
padding:0px 39px 0px 0px;
}
#navi ul {
margin: 0;
padding: 0;
list-style: none;
}
#navi li {
float: left;
margin: 0;
width:120px;
}
#navi li.navi_menu1{
float: left;
margin: 0;
width:140px;
}
#navi li a {
font-size: 14px;
color: #ffffff;
display: block;
width: 100%;
padding: 0px 0;
text-align: center;
font-weight: bold;
text-decoration: none;
background-color: #3399ff;
}
#navi li a:hover {
color: #ffffff;
background-color: #3366cc;
}
#navi ul.sub {
background: #eeeeee;
}
#navi ul.sub li {
padding:5px 0px 0px 0px;
float: none;
height:25;
}
#navi ul.sub li.navi_menu1 {
float: none;
height:25;
width:180;
}
#navi ul.sub li a {
color: #666666;
background: none;
font-size: 12px;
font-weight: normal;
padding:0px 0;
border-top:0px solid #000099;
}
#navi ul.sub li a:hover {
color: #ffffff;
background-color: #ff9900;
}
#navi ul li.navi_menu ul {
display: none;
}
#navi ul li.navi_menu_on ul {
display: block;
}
#navi li.navi_menu{
border:0px solid #000099;
}
#navi li.navi_menu_on{
border:0px solid #000099;}
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
