<html>
<head>
<title>李晖</title>
<style>
body{
margin:30px auto;
padding:30px;
width:1000px;
border:5px red solid;
}
a{
text-decoration:none;
color:red;
margin-left:53px;
}
#list1 li{
width:134px;
list-style-type:none;
display:inline-block;
}
#list1 li:hover{
background-color:yellow;
}
#list1{
padding-left:0;
}
#list1 li a:hover{
color:blue;
}
#list1 .uu2{
border-left:5px solid orange;
}
#list1 .uu1{
border:none;
}
#list2{
padding-left:0;
display:none;
}
#list2 li{
width:134px;
list-style-type:none;
border:none;
}
#list1 li:hover #list2{
display:inline-block;
}
#list2:hover{
background-color:blue;
}
#list2 li:hover{
background-color:red;
}
</style>
</head>
<body>
<ul id="list1">
<li class="uu1"><a href="">333</a >
<ul id="list2">
<li><a href="">111</a ></li>
<li><a href="">111</a ></li>
<li><a href="">111</a >
</ul>
</li>
<li class="uu2"><a href="">333</a >
<ul id="list2">
<li><a href="">111</a ></li>
<li><a href="">111</a ></li>
<li><a href="">111</a >
</ul>
</li>
<li class="uu2"><a href="">333</a >
<ul id="list2">
<li><a href="">111</a ></li>
<li><a href="">111</a ></li>
<li><a href="">111</a ></li>
</ul>
</li>
<li class="uu2"><a href="">333</a >
<ul id="list2">
<li><a href="">111</a ></li>
<li><a href="">111</a ></li>
<li><a href="">111</a ></li>
</ul>
</li>
<li class="uu2"><a href="">333</a >
<ul id="list2">
<li><a href="">111</a ></li>
<li><a href="">111</a ></li>
<li><a href="">111</a ></li>
</ul>
</li>
<li class="uu2"><a href="">333</a >
<ul id="list2">
<li><a href="">111</a ></li>
<li><a href="">111</a ></li>
<li><a href="">111</a ></li>
</ul>
</li>
<li class="uu2"><a href="">333</a >
<ul id="list2">
<li><a href="">111</a ></li>
<li><a href="">111</a ></li>
<li><a href="">111</a ></li>
</ul>
</li>
</ul>
</bod
</html>
