• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:html,cssプルダウンメニューについて教えてください。)

HTML、CSSプルダウンメニューの問題と解決法

このQ&Aのポイント
  • HTML、CSSのみで作成したプルダウンメニューの問題点と解決法について教えてください。
  • プルダウンメニュー表示時に親要素の高さが広がってしまい、それ以下の要素がずれてしまう問題が発生しています。プルダウンメニューが表示されても親要素の高さは変わらず、他の要素の上に重なって表示させる方法を教えてください。
  • HTML、CSSプルダウンメニューの問題点と解決法について教えてください。プルダウンメニュー表示時に親要素の高さが広がってしまい、これに伴い他の要素がずれる問題があります。どのようにすればプルダウンメニューを表示しても親要素の高さが変わらず、他の要素の上に重なって表示できるでしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
  • 0909union
  • ベストアンサー率39% (325/818)
回答No.2

>現在html,cssのみでプルダウンメニューを なんで、それにこだわっているのかわかりません。意味不明なことはやめて、他のHPをブラウザのソースを見て勉強するとすぐわかります。 実際、あなたのコード見ると、 onmouseover="this.className='navi_menu_on'" となっています。使っていない(のみと言っている)といいながら、使っていますね。これはDOMにJavaScriptでアクセスしてコントロールしています。分かりやすいのが、ローカルのファイルにして、そのファイルをIEで表示すると「ActiveX・・・」などとスクリプトが使用されている事の注意を受けます。 本題です。 本現象は、DHTML(DOM)の仕様です。このようになって当たり前の要素が含まれており、正しい動作をしています。 display: none; がその要因です。これは、オブジェクトを隠滅するのではなく、存在を消します。これは下記のURLで説明されています。ここのサイトは、適切な内容をしめしているので参考にするといいでしょう。 http://hp.vector.co.jp/authors/VA022006/css/visualren.html#display 表示を制御するには他にもあり下記の要素です。 http://hp.vector.co.jp/authors/VA022006/css/visualren.html#visibility これは、表示のみをOn Offします。存在はそのままです。この属性を指定する方法がひとつ。 他にも、position属性で絶対値指定でのボックスオブジェクトにする方法があります。 最初から大きくなった状態のheight属性を指定しておくのもありですね。 DIVの外で定義してもいいわけです。その方が私は簡単だと思いますが。 上記の話は、HTMLの基本なので、しっかりと基礎を勉強しましょう。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html (HTMLの仕様) https://developer.mozilla.org/ja/Gecko_DOM_Reference (DOMリファレンス) インラインとかブロックオブジェクトなどDOMをしっかり勉強しましょう。HTMLをCSSでコントロールするためにはDOMを勉強しないと、分かり図らです。CSSもDOMを無視して設定は不可能です。

chika1126
質問者

お礼

0909unionさん>> 回答くださってありがとうございました。 わかりやすいサイトのURLを貼ってくださったので、大変勉強になりました。 今回の原因も理解できました。 教えて頂いたvisibility要素や、positionの絶対値指定を活用して 作成してみようと思います。また、教えて頂いたサイト等を参考にして もっと勉強してみます。 お忙しい中、詳細なご回答ありがとうございました。

その他の回答 (1)

  • msnspica
  • ベストアンサー率0% (0/1)
回答No.1

こんにちは。 CSS部分「#navi li 」のwidthを「140px」に合わせてみては? #navi li { float: left; margin: 0; width:140px; } これで問題点は解決されましたでしょうか?

chika1126
質問者

お礼

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

関連するQ&A

専門家に質問してみよう