                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /商城分類導(dǎo)航效果

如圖，懸浮層上的字顯示不出來，不知道問題到底出在哪里？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
? ? ? ?"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
? ?<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
? ?<title></title>
? ?<style type="text/css">
? ? ? ?body
{
? ? ? ? ? ?padding:0;
? ? ? ? ? ?font-size:10pt;
? ? ? ?}
? ? ? ?.topmenu{

? ? ? ? ? ?display:block;
? ? ? ? ? ?width:220px;
? ? ? ? ? ?border:2px solid #e4393c;
? ? ? ? ? ?margin:0;
? ? ? ? ? ?padding:0;
? ? ? ?}
? ? ? ?.toptitle{
? ? ? ? ? ?height:40px;
? ? ? ? ? ?line-height:40px;
? ? ? ? ? ?text-align:left;
? ? ? ? ? ?font-size:11pt;
? ? ? ? ? ?font-weight:bold;
? ? ? ? ? ?color:White;
? ? ? ? ? ?background:#e4393c;
? ? ? ? ? ?padding-left:20px;
? ? ? ?}
? ? ? ?.topmenu li{
? ? ? ? ? ?height:30px;
? ? ? ? ? ?line-height:30px;
? ? ? ? ? ?font-size:11pt;
? ? ? ? ? ?list-style-type:none;/*去掉list前面的小圓點(diǎn),其他的瀏覽器已經(jīng)沒有小圓點(diǎn)了，ie有*/
text-align:left;
? ? ? ? ? ?padding-left:8px;
? ? ? ? ? ?z-index:3;
? ? ? ? ? ?background-image:url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg);
? ? ? ? ? ?background-repeat:no-repeat;
? ? ? ? ? ?background-position:right;/*可簡寫為：background:url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg) no-repeat right;*/
}
? ? ? ?.topmenu li a{
? ? ? ? ? ?text-decoration:none;
? ? ? ? ? ?color:#313131;
? ? ? ?}
? ? ? ?.topmenu li a:hover{
? ? ? ? ? ?text-decoration:underline;
? ? ? ? ? ?font-weight:bold;
? ? ? ? ? ?color:#e4393c;
? ? ? ?}
? ? ? ?.topmenu li:hover{
? ? ? ? ? ?border:1px solid #DDD;
? ? ? ? ? ?border-right:0;
? ? ? ? ? ?box-shadow:0 0 8px #DDD;
? ? ? ? ? ?-moz-box-shadow:0 0 8px #DDD;/*兼容firefox*/
-webkit-box-shadow:0 0 8px #DDD;/*兼容雇谷歌*/
background-image:none;
? ? ? ?}
? ? ? ?.submenu{
? ? ? ? ? ?display:none;
? ? ? ? ? ?width:715px;
? ? ? ? ? ?left:220px;
? ? ? ? ? ?position:absolute;
? ? ? ? ? ?top:40px;
? ? ? ? ? ?border:1px solid #DDD;
? ? ? ? ? ?z-index:4;
? ? ? ? ? ?color:white;
? ? ? ? ? ?box-shadow:0 0 8px #DDD;
? ? ? ? ? ?-moz-box-shadow:0 0 8px #DDD;/*兼容firefox*/
-webkit-box-shadow:0 0 8px #DDD;/*兼容雇谷歌*/

}
? ? ? ?.leftdiv
{
? ? ? ? ? ?float:left;
? ? ? ? ? ?width:490px;
? ? ? ? ? ?margin:5px;

? ? ? ?}
? ? ? ?.rightdiv{
? ? ? ? ? ?background:blue;
? ? ? ? ? ?float:left;
? ? ? ? ? ?width:200px;
? ? ? ? ? ?margin:5px;
? ? ? ?}
? ? ? ?.topmenu li:hover .submenu
{
? ? ? ? ? ?display: block;
? ? ? ?}
? ? ? ?.topmenu li:hover span
{
? ? ? ? ? background:white;
? ? ? ? ? ?display:inline-block;
? ? ? ? ? ?z-index:20;
? ? ? ? ? ?width:20px;
? ? ? ? ? ?height:30px;
? ? ? ? ? ?float:right;
? ? ? ? ? ?position:relative;
? ? ? ?}
? ?</style>
</head>
<body>
<ul class="topmenu">
? ?<div class="toptitle">
? ? ? ?全部商品分類
? ?</div>
? ?<li><a href="#">圖書、音像、數(shù)字商品</a><span></span>
? <div class="submenu">
? ? ? ?<div class="leftdiv">
? ? ? ? ? ?左側(cè)二級(jí)分類<br />
? ? ? ? ? ?左側(cè)二級(jí)分類<br />
? ? ? ? ? ?左側(cè)二級(jí)分類<br />
? ? ? ? ? ?左側(cè)二級(jí)分類<br />
? ? ? ? ? ?左側(cè)二級(jí)分類<br />
? ? ? ?</div>
? ? ? ?<div class="rightdiv">右側(cè)推薦品牌</div>
? ?</div></li>
? ?<li><a href="#">家用電器</a></li>
? ?<li><a href="#">手機(jī)、數(shù)碼</a></li>
? ?<li><a href="#">電腦、辦公</a></li>
? ?<li><a href="#">家居、家具、家裝、廚具</a></li>
? ?<li><a href="#">服飾內(nèi)衣、珠寶首飾</a></li>
? ?<li><a href="#">個(gè)護(hù)化妝</a></li>
? ?<li><a href="#">鞋靴、箱包、鐘表、奢侈品</a></li>
? ?<li><a href="#">鞋靴、箱包、鐘表、奢侈品</a></li>
? ?<li><a href="#">運(yùn)動(dòng)戶外</a></li>
? ?<li><a href="#">汽車用品</a></li>
? ?<li><a href="#">母嬰、玩具樂器</a></li>
? ?<li><a href="#">食品飲料、酒類、生鮮</a></li>
? ?<li><a href="#">營養(yǎng)保健</a></li>

</ul>
</body>
</html>