ドロップダウンメニューについて
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>
補足
説明不足ですみませんでした。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> としています。本を見ながら作ったのですが、この部分は変える必要はないというような事を書いてありましたので、そのまま記載しました。 よろしくお願いします。