前端-初级二级菜单

前端-模拟小米官网初级二级菜单



	
		
		
		
	
	
		
	

css界面

.ul-list{
	list-style: none;
	border:1px solid darkorange;
	width: 1000px;
	height: 80px;
	padding-left: 200px;
}
li{
	list-style: none;
	float:left;
   	margin-left:30px;
}
a{
	text-decoration: none;
	color: black;
	display:block;
	text-align: center;
	line-height: 80px;
	/*法二:block是把行内元素以块级元素的形式展示出来*/
}
a:hover{
	color: orange;
}
.menu{
	border:1px solid #FFA500;
	height: 200px;
	width: 1160px;
	position: absolute;
	/*必须绝对定位*/
	display:none;
	/*二级菜单隐藏*/
}
#m-1{
	margin-left:-231px;
}
#m-2{
	margin-left:-325px;
}
#m-3{
	margin-left:-387px;
}
#m-4{
	margin-left:-449px;
}
#m-5{
	margin-left:-527px;
}
#m-6{
	margin-left:-589px;
}
#m-7{
	margin-left:-651px;
}
#m-8{
	margin-left:-729px;
}
#m-9{
	margin-left:-823px;
}
#m-10{
	margin-left:-885px;
}
ul>li>ul>li{
	float:left;
}
ul>li:hover ul{
	display:block;
	/*当鼠标悬在一级菜单上时,二级菜单显示*/
}
/*hover表示一种状态,可以用在很多标签后面*/
b{
	color: orange;
	display:block;
	line-height: 10px;
	text-align: center;
	/*法二:block是把行内元素以块级元素的形式展示出来*/
}
b:link{
    color:gray;
}/*未被访问*/
b:hover{
    color:orange;
}/*停留*/
b:active{
    color:gray;
}/*点击链接*/
#mi9-2{
	color:gray;
}

你可能感兴趣的:(前端)