HTML列表标签 CSS 下拉菜单

列表标签

1. 无序列表 ul
   无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

< ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
< /ul>

2. 有序列表 ol
   有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

< ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
< /ol>

3. 自定义列表dl
   定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

< dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
< /dl>

下拉菜单

效果图：

1. HTML代码

用无序列表写出一二级菜单内容

			<ul class="header_ul">
				<li class="home_li"><a href="#">HOME</a>
				<ul class="home_ul">
					<li class="home_li1"><a href="#">home1</a>
					<ul class="home_ul1">
						<li>111</li>
						<li>222</li>
						<li>333</li>
					</ul>
					</li>
					<li ><a href="#">home2</a></li>
					<li ><a href="#">home3</a></li>
				</ul>
				</li>
				<li class="home_li"><a href="#">PAGES</a>
					<ul class="home_ul">
				    <li ><a href="#">pages1</a></li>
					<li ><a href="#">pages2</a></li>
					<li ><a href="#">pages3</a></li>
					</ul></li>
				<li><a href="#">PORTFO</a></li>
				<li><a href="#">BLOG</a></li>
				<li><a href="#">SHOP</a></li>
				<li><a href="#">FEATURES</a></li>
			</ul>

2. CSS代码

/**/
.header_ul{
	margin-left:100px ;
	float: left;
	list-style: none;
}

.header_ul li{
	
	float: left;
	padding: 15px 15px 15px 15px;
}
.header_ul li a{
	color: white;
	text-decoration: none;
	font-size: 14px;
	font-weight: 300px;
	
}
.home_ul{
	
	display: none;
	list-style: none;
	position: absolute;
	background: rgba(255,255,255,0.4);
}

.home_ul li{
	
	margin-left: -35px;
	float: none;
}
.home_ul1{
	display: none;
	list-style: none;
	position: absolute;
	background: rgba(255,255,255,0.4);
	margin-left: 63px;
	margin-top: -25px;
}

.home_ul1 li{
	
	float: none;
}
/*伪类选择器*/
.header_ul li a:hover{
	color: aquamarine;
}
.home_li:hover .home_ul{
	display: block;
}
.home_li1:hover .home_ul1{
	display: block;
}