ドロップダウンメニューについて
apycomでhttp://apycom.com/menus/1-yellow-green.htmlの
ドロップダウンメニューをダウンロードして設定しているのですが、サブメニューのリンク文字の変更方法が分からなくて困っています。
サブメニューの背景を変更したのでリンクの文字をもっとハッキリ見える色に変更したいです。
マウスが乗った時の文字の色も変更できません。
昨日から色々やってるのですがどうしても解決できないのでお聞きしました。
よろしくお願いします。
/**
*********************************************
* Prototype of styles for horizontal CSS-menu
* @data 30.06.2009
*********************************************
* (X)HTML-scheme:
* <div id="menu">
* <ul class="menu">
* <li><a href="#" class="parent"><span>level 1</span></a>
* <ul>
* <li><a href="#" class="parent"><span>level 2</span></a>
* <ul><li><a href="#"><span>level 3</span></a></li></ul>
* </li>
* </ul>
* </li>
* <li class="last"><a href="#"><span>level 1</span></a></li>
* </ul>
* </div>
*********************************************
*/
/* menu::base */
div#menu {
height:41px;
background : transparent url(main-bg.png) repeat-x scroll 0% 0%;
}
div#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
div#menu ul.menu {
padding-left: 30px;
}
div#menu li {
position: relative;
z-index: 9;
margin: 0;
padding: 0 5px 0 0;
display: block;
float: left;
}
div#menu li:hover >ul {
left: -2px;
}
div#menu a {
position: relative;
z-index: 10;
height: 41px;
display: block;
float: left;
line-height: 41px;
text-decoration: none;
font: normal 12px Trebuchet MS;
}
div#menu a:hover, div#menu a:hover span {
color: #fff;
}
div#menu li.current a {}
div#menu span {
display: block;
cursor: pointer;
background-repeat: no-repeat;
background-position: 95% 0;
}
div#menu ul ul a.parent span {
background-position:95% 8px;
background-image : url(item-pointer.gif);
}
div#menu ul ul a:hover.parent span {
background-image : url(item-pointer-mover.gif);
}
/* menu::level1 */
div#menu a {
padding: 0 10px 0 10px;
line-height: 30px;
color : rgb(56, 56, 56);
}
div#menu span {
margin-top: 5px;
}/**@replace#1*/
div#menu li {
background : transparent url(main-delimiter.png) no-repeat scroll 98% 4px;
}
div#menu li.last {
background: none;
}
/* menu::level2 */
div#menu ul ul li {
background: none;
}
div#menu ul ul {
position: absolute;
top: 38px;
left: -999em;
width: 163px;
padding: 5px 0 0 0;
background : rgb(179, 221, 81) none repeat scroll 0% 0%;
margin-top:1px;
}
div#menu ul ul a {
padding: 0 0 0 15px;
height: auto;
float: none;
display: block;
line-height: 24px;
color : rgb(56, 56, 56);
}
div#menu ul ul span {
margin-top: 0;
padding-right: 15px;
_padding-right: 20px;
color : rgb(56, 56, 56);
}
div#menu ul ul a:hover span {
color: #fff;
}
div#menu ul ul li.last {
background: none;
}
div#menu ul ul li {
width: 100%;
}
/* menu::level3 */
div#menu ul ul ul {
padding: 0;
margin: -38px 0 0 163px !important;
margin-left:172px;
color: #FFFFFF;
}
/* colors */
div#menu ul ul ul {
background: rgb(41,41,41);
}
div#menu ul ul ul ul {
background: rgb(38,38,38);
}
div#menu ul ul ul ul {
background: rgb(35,35,35);
}
/* lava lamp */
div#menu li.back {
background : transparent url(lava.png) no-repeat scroll right -44px !important;
background-image : url(lava.gif);
width: 13px;
height: 44px;
z-index: 8;
position: absolute;
margin: -1px 0 0 -5px;
}
div#menu li.back .left {
background : transparent url(lava.png) no-repeat scroll left top !important;
background-image : url(lava.gif);
height: 44px;
margin-right: 8px;
}
【html】
<div id="menu">
<ul class="menu">
<li><a href="#"><span>Home</span></a>
<li><a href="#" class="parent"><span>商品紹介</span></a>
<ul>
<li><a href="#"><span>コンクリート</span></a>
<li><a href="#"><span>木材</span></a>
<li><a href="#"><span>アクセサリー</span></a>
<li><a href="#"><span>砂</span></a>
<li><a href="#"><span>フード</span></a>
お礼
font_color様 何度もありがとう御座います。 感謝感激です。 早々、試してみます。 ページは、縦に長く下まで複数の画像があるので 下の吹き出しが画面のはるか上に表示され 確認することが出来なくなっていました。 また、右側の吹き出しが画面から はみ出し見えなくなり困っておりました。 この度は、本当にありがとう御座います。