ドロップダウンメニューについて
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 XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TITLE</title> <style type="text/css"> .pager { width: 560px; text-align: center; } .pager ul { margin auto; padding-left: 80px; width: 460px; } .pager ul li { list-style: none; display: inline; float: left; line-height: 20px; width: 20px; height: 20px; border: solid 1px #ccc; } .pager ul li a { line-height: 20px; width: 20px; height: 20px; text-decoration: none; color: #123456; } .pager ul li a:hover { color: #456789; } .pager ul:after { content: "."; display: block; height: 0px; clear: both; line-height: 0; visibility: hidden; } </style> </head> <body> <div class="pager"> <ul> <li><a href="#">1</a></li> <li>2</li> <li><a href="#">3</a></li> </div> </body> </html> atタグでくくらずテキストのみであれば親要素にtext-align:center;を指定してやれば問題ないのですが・・・