本示例完成了列表的样式设置以及鼠标悬停事件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>OLULli2</title>
<style>
.list{
background-color:skyblue;
display:none;
}
#menu{
300px;
background-color:pink;
}
ul{
list-style:none;
padding:0;
text-align:center;
line-height:30px;
}
/*伪类选择器 标签元素 + : + 要做的动作 hover:鼠标悬停事件 */
#menu li:hover ul{
display:block;
}
</style>
</head>
<body>
<ul id="menu">
<li>地球
<ul class="list">
<li>月亮</li>
<li>星星</li>
</ul>
</li>
<li>土星
<ul class="list">
<li>土卫一</li>
<li>土卫二</li>
</ul>
</li>
<li>木星
<ul class="list">
<li>木卫一</li>
<li>木卫二</li>
</ul>
</li>
</ul>
</body>
</html>