日期:2014-05-17  浏览次数:20592 次

为什么不能改变子菜单的字体颜色?
HTML code

    <div id='menu'>
                <ul>
                    <li class='interval'>|</li>
                    <li><a href="index.html">首&nbsp;&nbsp;&nbsp;&nbsp;页</a></li>
                    <li class='interval'>|</li>
                    <li>
                        <a href="#">研究方向</a>
                        <div id='submenu'>
                                <div class='subitem'><a href="1.html">- xxxxxxxxxx -</a></div>
                                <div class='subitem'><a href="1.html">- xxxxxxxxx -</a></div>
                                <div class='subitem'><a href="1.html">- xxxxxxxxxx -</a></div>
                                <div class='subitem'><a href="1.html">- xxxxxxxxxx -</a></div>
                        </div>
                    </li>
                    <li class='interval'>|</li>
                    <li><a href="topic.html">研究课题</a></li>
                    <li class='interval'>|</li>
                    <li><a href="team.html">研究团队</a></li>
                    <li class='interval'>|</li>
                    <li><a href="cooperation.html">交流合作</a></li>
                    <li class='interval'>|</li>
                    <li><a href="product.html">科研成果</a></li>
                    <li class='interval'>|</li>
                    <li><a href="passenger.html">毕业成员</a></li>
                    <li class='interval'>|</li>
                    <li><a href="contact.html">联系我们</a></li>
                    <li class='interval'>|</li>
                </ul>



CSS code

#menu {
    padding:0px;
    position:absolute;
    margin:0 auto;
    height:26px;
    /*background:#ABC;*/
    top:110px;
    width:960px;
    left:15%;
    z-index:990;
}
#menu ul{
    margin:0 auto;
    position:absolute;
    /*background:#00FF00;*/
    list-style:none;
    padding:0px;
    height:26px;
    line-height:26px;
}
#menu ul li{
    float:left;
    padding:0px;
    height:26px;
    line-height:26px;

}
#menu ul li a {
    color:#7777CC;
    display:block;
    padding:0px 27px;
    height:26px;
    line-height:26px;
    float:left;
}
#menu ul li a:hover {
    background:#7777CC;
    color:#EEE;
}
#menu #submenu {
    position:absolute;
    padding:0px;
    float:left;
    top:26px;
    width:600px;
    height:54px;
    display:block;
    background-color:#AAB;
}
.subitem {
    width:600px;
    color:#FF0000;
}


代码如上,submenu继承了menu的字体颜色,无法独立定义

------解决方案--------------------
#menu .subitem a{
color:#FF0000;
}
这样就行了