为什么不能改变子菜单的字体颜色？
<div id='menu'> <ul> <li class='interval'>|</li> <li><a href="index.html">首 页</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>
#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;}