CSSのドロップダウンメニューが見出しで切れる

質問

CSSでドロップダウンメニューを作りました。
ページの上部に横並びの状態です。
メニューを押すと下に4項目程度のリストが下がってきます。
今まで本文の見出しには<h1>タグを使用せず画像でのみで作っており、リストには影響がありませんでした。
<h1>を使用しCSSで装飾したところ、ドロップダウンメニューの<h1>にかぶる部分が切れてしまいます。
解決策はありますでしょうか。
宜しくお願い致します。

回答No.2

muuming2001 · ベストアンサー

z-index ちゃんと指定してどちらが上にあるか設定すればいいかも

お礼

お礼が遅くなりすみません！
ドロップダウンメニューの方にposition指定をしたら切れずに表示できるようになりました。
本当にありがとうございました。

回答No.1

muuming2001

どういう作りにしてるのかも何も説明ないし、すぐに回答ほしいといっても無理です。
だ～～～～れもわかりません。

お礼

回答ありがとうございます。
コードを載せずすみませんでした。
メニューを画像でなくテキストで作り直したいです。

補足

コードを補足します。

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