ドロップダウンメニューについて
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>
お礼
回答ありがとうございます。自分でも書いた後なんでCSSと書いている事にきずいたんですが。。 ＞ご提示のドロップダウンメニューのサンプル自体がjavascriptを利用しているようですので、ANo.1様も提案しておられますが、メニュー本体をjs化しておくのが簡単そう。 一応外部js化してみます。また分からない場合は質問させていただきます。