為什么沒有鼠標(biāo)浮動(dòng)效果？
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>京東商城</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:0;
font-size:10px;}
.topmenu{
display:block;/*以塊狀形式展示*/
width:220px;
border:2px solid #e4393c;
margin:0;
padding:0;}
.toptitle{
height:40px;
line-height:40px;
text-align:left;
font-size:11px;
font-weight:bold;
color:#FFF;
background:#e4393c;
padding-left:20px;}
.topmenu li{
height:30px;
line-height:30px;
font-size:11px;
list-style-text:onoe;
text-align:left;
padding-left:8px;
z-index: 3;/*z-index設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面,像之后的二級(jí)目錄的z-index就設(shè)置為4了**/
background-image:url(images/888.PNG);
background-repeat:no-repeat;
background-position: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;/*外發(fā)光效果*/
-moz-box-shadow:0 0 8px #DDD;
-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;
background:white;
box-shadow:0 0 8px #DDD;/*外發(fā)光效果*/
-moz-box-shadow:0 0 8px #DDD;
-webkit-box-shadow:0 0 8px #DDD;}
.leftdiv{
background: gray;
float:left;
width:490px;
margin:5px;}
.rightdiv{
background: blue;
float:left;
width:200px;
margin:5px;}
.topmenu li:hover.submenu
{
display:block;
}
</style>
</head>
<body>
<ul class="topmenu">
? ? <div class="toptitle">
? ? ? ? 全部商品分類
? ? ? ? </div>
? ? <li><a href="#">家用電器</a></li>
? ? ? ? <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è)廣告圖片<br />
? ? ? ? ? ? ? ? 右側(cè)廣告圖片<br />
? ? ? ? ? ? ? ? 右側(cè)廣告圖片<br />
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? <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è)性化妝、清潔能源、寵物</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="#">食品、酒類、生鮮、特產(chǎn)</a></li>
? ? ? ? <li><a href="#">醫(yī)藥保健</a></li>
? ? ? ? <li><a href="#">圖書、音像、電子書</a></li>
? ? ? ? <li><a href="#">彩票、旅行、充值、票務(wù)</a></li>
? ? ? ? <li><a href="#">理財(cái)、眾籌、白條、保險(xiǎn)</a></li>
? ? </ul>
</body>
</html>
2016-08-10
你“家用電器”那級(jí)li結(jié)束部分應(yīng)該是把.leftdiv和.rightdiv都包裹起來，否則它不起作用，第一級(jí)li包裹層級(jí)錯(cuò)誤
改成：
<li><a href="#">家用電器</a>
? ? ? ? <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è)廣告圖片<br />
? ? ? ? ? ? ? ? 右側(cè)廣告圖片<br />
? ? ? ? ? ? ? ? 右側(cè)廣告圖片<br />
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
</li>
就可以了
2016-08-10
謝謝！不過按你說的改了以后還是不起做作用，w3c驗(yàn)證后出現(xiàn)以下提示，請(qǐng)問這些是什么意思？