- ベストアンサー
CSSのドロップダウンメニューが見出しで切れる
CSSでドロップダウンメニューを作りました。 ページの上部に横並びの状態です。 メニューを押すと下に4項目程度のリストが下がってきます。 今まで本文の見出しには<h1>タグを使用せず画像でのみで作っており、リストには影響がありませんでした。 <h1>を使用しCSSで装飾したところ、ドロップダウンメニューの<h1>にかぶる部分が切れてしまいます。 解決策はありますでしょうか。 宜しくお願い致します。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- muuming2001
- ベストアンサー率23% (202/847)
どういう作りにしてるのかも何も説明ないし、すぐに回答ほしいといっても無理です。 だ～～～～れもわかりません。
お礼
回答ありがとうございます。 コードを載せずすみませんでした。 メニューを画像でなくテキストで作り直したいです。
補足
コードを補足します。 【HTML（ドロップダウンメニュー）】 <div id="navi"> <ul> <li><a href="00.html"><img src="00.gif" alt="会社概要"></a></li> <li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('service','','images/service-over.gif',1)"><img src="images/service.gif" alt="サービス内容" name="service" width="155" height="32" border="0" id="service" /></a> <ul class="sub"> <li><a href="01.html">内容1</a></li> <li><a href="02.html">内容2</a></li> <li><a href="03.html">内容3</a></li> <li><a href="04.html">内容4</a></li> </ul> </li> <li id="left_space"><a href="06.html"><img src="06.gif" alt="業務実績"></a></li> <li id="both_space"><a href="07.html"><img src="images/07.gif" alt="求人募集"></a></li> <li id="both_space"><a href="08.html"><img src="images/08.gif" alt="最新情報"></a></li> <li id="both_space"><a href="09.html"><img src="images/09.gif" alt="お問い合わせ"></a></li> </ul> </div> 【CSS（ドロップダウンメニュー）】 #navi { width:100%; } #navi ul { margin:0; padding:0; list-style:none; } #navi li { width:155px; margin:0; color:#fff; line-height:1.7em; float:left; } #navi li a { width:100%; color:#036; text-decoration:none; text-align:center; display:block; } #navi li a:hover { } /* SUB MENU */ #navi ul.sub { height:100%; /* IE6 */ background-color: #FFFF66; } #navi ul.sub li { float:none; border-top:1px solid #fff; } #navi ul.sub li a { background:none; font-weight:normal; font-size: 12px; } #navi ul.sub li a:hover { color:#069; background:#ff9900; } #navi ul li.menu ul { display:none; } #navi ul li.menu_on ul { display:block; position: absolute; /* [disabled]width: 155px; */ height: 84px; } #navi li.menu { border-top-width: 0; border-right-width: 1px; border-bottom-width: 0; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FFFFFF; border-right-color: #FFFFFF; border-bottom-color: #FFFFFF; border-left-color: #FFFFFF; } #navi li.menu_on { border-top-width: 0; border-right-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FFFFFF; border-right-color: #FFFFFF; border-bottom-color: #FFFFFF; border-left-color: #FFFFFF; border-bottom-width: 0px; } 【HTML（見出し）】 <h1>会社概要</h1> 【CSS（見出し）】 h1 { position: relative; margin: 0 0 1em; padding: 0.2em 0 0.2em 1.5em; border: 1px solid #CC0000; font-size: 1.143em; font-weight: bold; background: #FFFFFF; } h1:before { content: ""; position: absolute; background: #CC0000; top: 50%; left: 0.5em; margin-top :-10px; height: 20px; width: 6px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
お礼
お礼が遅くなりすみません！ ドロップダウンメニューの方にposition指定をしたら切れずに表示できるようになりました。 本当にありがとうございました。