<!DOCTYPE html>
<html>
<head>
<meta 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-color: #e4393c;
padding-left:20px;
}
.topmenu li {
height: 30px;
line-height: 30px;
font-size:11pt;
list-style-type: none;
text-align: left;
padding-left: 8px;
z-index: 3;
background-image: url(1.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;
-moz-box-shadow: 0 0 8px #DDD;
-webkit-box-shadow: 0 0 8px #DDD;
background-image:none;
}
.submenu{
display: block;
width: 715px;
left:220px;
position: absolute;
top: 40px;
border: 1px solid #DDD;
z-index: 4;
background:white;
-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: lightblue;
float: left;
height:200px;
width: 200px;
margin: 5px;
}
</style>
</head>
<body>
<ul class = "topmenu">
<div class = "toptitle">全部商品分类</div>
<li><a href = "#">图书，音像，数字商品</a>
<div class = 'submenu'>
<div class = "leftdiv">
左侧二级分类<br/>
左侧二级分类<br/>
左侧二级分类<br/>
左侧二级分类<br/>
左侧二级分类<br/>
左侧二级分类<br/>
左侧二级分类<br/>
</div>
<div class = "rightdiv">
右侧推荐品牌
</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>
<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>
<li><a href = "#">理财，众筹，白条，保险</a></li>
</ul>
</body>
</html>Menoen