HTML第六天有序无序列表样式设置

本示例完成了列表的样式设置以及鼠标悬停事件

<!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>

HTML第六天 有序无序列表样式设置

HTML第六天有序无序列表样式设置