背景設定をするとグローバルナビ・テキストが消えてしまいます

質問

CSSで背景を設定しますと
グローバルナビ・テキストが
消えてしまいます。

背景でなく、前面に画像が貼られているような
イメージです。

どのように設定したらよいのでしょうか。
宜しくお願いします。

回答No.3

jet5024898

はじめまして、
たぶん
<ul class="test">
<li><a href="#">テキスト</a></li>
</ul>
とかで

.test li {background-image:***.jpg;}
.test a:hover {backiground-image:123.jpg;}

とかにした場合にテキストにマウスを乗せた瞬間ナビ自体が消えてしまうってことでいいのでしょうか。

それであれば。
.test li {background-image:***.jpg;}
.test a {background-image:***.jpg;}
.test a:hover {background-image:123.jpg;}

にしてみてはいかがでしょう？

自分も同じことになって、半時間悩みました。

回答No.2

ishibo_062

表示の設定（CSS）を記入して頂いた方が回答も多く得られると思われます。
ＣＳＳでのナビ系は色々な方法がありますので一概にグローバルナビでは…
との記載では答えきれない部分があります。

ちなみに私の場合は、横並びのナビゲーションですが下記のような感じで作ってます。

■ＣＳＳ
div#head_navi {
margin: 0;
padding: 0;
}
div#head_navi ul,
div#head_navi ul li {
float: left;
list-style-type: none;
}
div#head_navi ul {
width: 690px;
height: 60px;
background: url(./img/head_navi_bg.jpg) no-repeat;
margin: 0 0 10px 0;
padding: 0;
}
div#head_navi ul li a {
display: block;
width: 115px;
height: 60px;
text-indent: -999px;
font-size: 0;
line-height: 0;
}
div#head_navi ul li.head_n01 a.active,
div#head_navi ul li.head_n01 a:focus,
div#head_navi ul li.head_n01 a:hover {
background: url(./img/head_navi_bg.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
div#head_navi ul li.head_n02 a.active,
div#head_navi ul li.head_n02 a:focus,
div#head_navi ul li.head_n02 a:hover {
background: url(./img/head_navi_bg.jpg);
background-repeat:no-repeat;
background-position: -115px -60px;
}
div#head_navi ul li.head_n03 a.active,
div#head_navi ul li.head_n03 a:focus,
div#head_navi ul li.head_n03 a:hover {
background: url(./img/head_navi_bg.jpg);
background-repeat:no-repeat;
background-position: -230px -60px;
}
div#head_navi ul li.head_n04 a.active,
div#head_navi ul li.head_n04 a:focus,
div#head_navi ul li.head_n04 a:hover {
background: url(./img/head_navi_bg.jpg);
background-repeat:no-repeat;
background-position: -345px -60px;
}
div#head_navi ul li.head_n05 a.active,
div#head_navi ul li.head_n05 a:focus,
div#head_navi ul li.head_n05 a:hover {
background: url(./img/head_navi_bg.jpg);
background-repeat:no-repeat;
background-position: -460px -60px;
}
div#head_navi ul li.head_n06 a.active,
div#head_navi ul li.head_n06 a:focus,
div#head_navi ul li.head_n06 a:hover {
background: url(./img/head_navi_bg.jpg);
background-repeat:no-repeat;
background-position: -575px -60px;
}
■ＨＴＭＬ
<div id="head_navi">
<ul>
<li class="head_n01"><a href="" title="SAM1">SAM1</a></li>
<li class="head_n02"><a href="" title="SAM2">SAM2</a></li>
<li class="head_n03"><a href="" title="SAM3">SAM3</a></li>
<li class="head_n04"><a href="" title="SAM4">SAM4</a></li>
<li class="head_n05"><a href="" title="SAM5">SAM5</a></li>
<li class="head_n06"><a href="" title="SAM6">SAM6</a></li>
</ul>
</div>

今回はナビをテキスト表示したいとの事でしたので、ＣＳＳ内の
div#head_navi ul li a {
display: block;
width: 115px;
height: 60px;
text-indent: -999px;
font-size: 0;
line-height: 0;
}
上記のfont-sizeを任意の大きさに置き換えて下さい。
いつも画像のみのナビゲーションでテキスト表示まではおこなっておらず今回のものは確認しておりませんが恐らくうまくいけるかと思います。
ちなみに背景に関しては690*120の大きさで作成し、マウスオーバーでボタン表示が変化するような感じになってます。
実際のナビボタンは高さ60pxです。

先ずは参考までに…
尚、最初に書いたとおり c-blossoms さんの現在のＣＳＳを書いてもらわないとどの方も説明しづらいと思います。
今回はそればかり申し上げても何なんでついでに参考ＣＳＳを記載させて頂きました。

回答No.1

noname#83877

よくわかりませんが、もしもボックスの重なりが原因ならposition:relative;を指定してz-indexをいじればなんとかなると思います。
どんなソースなのかわからないのでこれくらいしかわかりません。