<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
#body{
background-image: url("Bg2.jpg");
width:1350px;
height:580px;
margin:auto;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
line-height: 30px;
color: white;
font-weight: bold;
}
ul li{
float: left;
background-color: blue;
text-align: center;
width: 10em;
height: 30px;
}
ul li ul{
/*float:left;*/
display:none;
/*position: absolute;*/
/*left: -100em;*/
}
#level1 li:hover ul{
/*left:auto;*/
display:block;
}
ul li:hover{
background-color: red;
}
</style>
</head>
<body>
<div id="body">
<ul id="level1">
<li><a href="">电子</a>
<ul>
<li><a href="">手机</a></li>
<li><a href="">电脑</a></li>
<li><a href="">数码</a></li>
</ul>
</li>
<li><a href="">家居</a>
<ul>
<li><a href="">家具</a></li>
<li><a href="">家装</a></li>
<li><a href="">厨具</a></li>
</ul>
</li>
<li><a href="">服装</a>
<ul>
<li><a href="">男装</a></li>
<li><a href="">女装</a></li>
<li><a href="">童装</a></li>
<li><a href="">内衣</a></li>
</ul>
</li>
<li><a href="">鞋包</a>
<ul>
<li><a href="">男鞋</a></li>
<li><a href="">女鞋</a></li>
<li><a href="">箱包</a></li>
</ul>
</li>
<li><a href="">食品</a>
<ul>
<li><a href="">酒类</a></li>
<li><a href="">生鲜</a></li>
<li><a href="">特产</a></li>
</ul>
</li>
<li><a href="">其他</a>
<ul>
<li><a href="">其他商品</a></li>
<li><a href="">女鞋</a></li>
<li><a href="">箱包</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>