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;}

回答No.2

0909union · ベストアンサー

＞現在html,cssのみでプルダウンメニューを

なんで、それにこだわっているのかわかりません。意味不明なことはやめて、他のＨＰをブラウザのソースを見て勉強するとすぐわかります。

実際、あなたのコード見ると、

onmouseover="this.className='navi_menu_on'"

となっています。使っていない（のみと言っている）といいながら、使っていますね。これはＤＯＭにJavaScriptでアクセスしてコントロールしています。分かりやすいのが、ローカルのファイルにして、そのファイルをＩＥで表示すると「ＡｃｔｉｖｅＸ・・・」などとスクリプトが使用されている事の注意を受けます。

本題です。

本現象は、ＤＨＴＭＬ（ＤＯＭ）の仕様です。このようになって当たり前の要素が含まれており、正しい動作をしています。

display: none;

がその要因です。これは、オブジェクトを隠滅するのではなく、存在を消します。これは下記のＵＲＬで説明されています。ここのサイトは、適切な内容をしめしているので参考にするといいでしょう。

http://hp.vector.co.jp/authors/VA022006/css/visualren.html#display

表示を制御するには他にもあり下記の要素です。

http://hp.vector.co.jp/authors/VA022006/css/visualren.html#visibility

これは、表示のみをＯｎ　Ｏｆｆします。存在はそのままです。この属性を指定する方法がひとつ。

他にも、position属性で絶対値指定でのボックスオブジェクトにする方法があります。

最初から大きくなった状態のheight属性を指定しておくのもありですね。

ＤＩＶの外で定義してもいいわけです。その方が私は簡単だと思いますが。

上記の話は、ＨＴＭＬの基本なので、しっかりと基礎を勉強しましょう。

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html
（ＨＴＭＬの仕様）

https://developer.mozilla.org/ja/Gecko_DOM_Reference
（ＤＯＭリファレンス）

インラインとかブロックオブジェクトなどＤＯＭをしっかり勉強しましょう。ＨＴＭＬをＣＳＳでコントロールするためにはＤＯＭを勉強しないと、分かり図らです。ＣＳＳもＤＯＭを無視して設定は不可能です。

お礼

0909unionさん>>
回答くださってありがとうございました。
わかりやすいサイトのＵＲＬを貼ってくださったので、大変勉強になりました。
今回の原因も理解できました。

教えて頂いたvisibility要素や、positionの絶対値指定を活用して
作成してみようと思います。また、教えて頂いたサイト等を参考にして
もっと勉強してみます。

お忙しい中、詳細なご回答ありがとうございました。

回答No.1

msnspica

こんにちは。

CSS部分「#navi li 」のwidthを「140px」に合わせてみては？

#navi li {
float: left;
margin: 0;
width:140px;
}

これで問題点は解決されましたでしょうか？

お礼

msnspicaさん>>
回答くださってありがとうございました。

widthを合わせみましたが、解決出来ませんでした。
いろいろ考えてくださってありがとうございます。

もっと勉強してみます！