做了好幾個小時，也算有點模樣，學到了很多東西，看過的東西還是要多練才能理解的透徹，連接處的白邊可以用小白塊覆蓋，真的很有創意（這是’剽竊’老師的思想了），做的練習還是不太夠的感覺，以後應該可以做的快一點。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>京東首頁分類導航效果</title>
<style type="text/css">
*{ padding:0; font-size:16px; line-height:1.8;}
.topmenu{
display:block;
border:solid #B1191A 1px;
width:210px;
z-index:3;
}
.topmenu li{
list-style-type:none;
text-indent:0px;
background:url(1.jpg);
background-repeat:no-repeat;
background-position:right;
}
.topmenu li>a{
text-indent:10px;
color: #313131;
text-decoration:none;
}
.toptitle{
background-color:#B1191A;
color:white;
font-size:18px;
height:50px;
padding-left:10px;
}
.topmenu li:hover
{
text-decoration:underline;
border: 1px solid #DDD;
border-right:0;
box-shadow:0 0 8px #DDD;
background-image:url(2.png);
background-position:right;
}
.topmenu li:hover span {
background: white none repeat scroll 0 0;
display: inline-block;
float: right;
height: 30px;
position: relative;
width: 20px;
z-index: 20;
}
.topmenu li a:hover
{
font-weight:bold;
color:#B1191A;
background-image:url(2.png);
}
.submenu{
background-color:#FFF;
display:none;
border: 1px solid #DDD;
box-shadow:0 0 5px #DDD;
width:715px;
left:210px;
position:absolute;
top:40px;
border:1px solid #ddd;
z-index:4;
}
.leftdiv{
float:left;
width:490px;
margin:5px;
}
.rightdiv{
float:right;
width:200px;
margin:5px;
}
.topmenu li:hover .submenu
{
display: block;
}
.leftdiv dl
{
display:block;
border-bottom:solid #CCC 1px;
padding-bottom:6px;
overflow:hidden;
}
.leftdiv dl dt
{
display:block;
float:left;
width:80px;
text-align:right;
height:22px;
padding-right:6px;
}
.leftdiv dl dt a
{
color:#B1191A;
}
.leftdiv dl dd
{
display:block;
overflow:hidden;
}
.leftdiv dl dd a
{
float:left;
text-align:center;
text-decoration:none;
line-height:22px;
color:#666;
padding:2px 8px;
margin:4px 0;
border-left:solid #ccc 1px;
}
.leftdiv dl dd a:hover{
color:#B1191A;
}
.rightdiv{
display:block;
float:right;
line-height:8px;
color: #666;
}
.rightdiv dl dt{
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<ul class="topmenu">
<div class="toptitle">全部商品分類</div>
<li><a href="#">圖書 音像 電子書</a> <span></span>
<div class="submenu">
<div class="leftdiv">
<dl >
<dt><a href="#">電子書</a></dt>
<dd ><a href="#">免費</a><a href="#">小說</a><a href="#">勵志與成功</a><a href="#">婚戀</a><a href="#">文學</a><a href="#">暢讀vip</a> </dd>
</dl>
<dl >
<dt><a href="#">數字音樂</a></dt>
<dd ><a href="#">通俗流行</a><a href="#">古典音樂</a><a href="#">搖滾說唱</a><a href="#">爵士藍調</a><a href="#">鄉村民謠</a><a href="#">有聲讀物</a> </dd>
</dl>
<dl >
<dt><a href="#">音像</a></dt>
<dd ><a href="#">音樂</a><a href="#">影視</a><a href="#">教育音像</a><a href="#">遊戲</a></dd>
</dl>
<dl >
<dt><a href="#">文藝</a></dt>
<dd ><a href="#">小說</a><a href="#">文學</a><a href="#">青春傳記</a><a href="#">藝術</a></dd>
</dl>
<dl >
<dt><a href="#">科技</a></dt>
<dd ><a href="#">科普</a><a href="#">IT</a><a href="#">建築</a><a href="#">醫學</a><a href="#">工業技術</a><a href="#">科學與自然</a> </dd>
</dl>
<dl >
<dt><a href="#">其他</a></dt>
<dd ><a href="#">英文原版書</a><a href="#">港臺圖書</a><a href="#">工具書</a><a href="#">套裝書</a><a href="#">雜誌</a><a href="#">期刊</a> </dd>
</dl>
</div>
<div class="rightdiv">
<dl>
<dt>
<img src="p1.png">
</dt>
<dt>
<dt>推薦品牌</dt>
<dd>小米旗艦店</dd>
<dd>華爲旗艦店</dd>
<dd>魅族旗艦店</dd>
</dl>
</div>
</div>
</li>
<li><a href="#">手機數碼 數碼 通信 </a></li>
<li><a href="#">電腦 辦公</a></li>
<li><a href="#">玩具樂器</a></li>
<li><a href="#">家居 家居 家裝 廚具</a></li>
<li><a href="#">男裝 女裝 童裝 內衣</a></li>
<li><a href="#">家用電器</a></li>
<li><a href="#">彩票 旅行 充值 票務</a></li>
</ul>
</body>
</html>