js/css导航条三级

最新推荐文章于 2021-09-08 17:51:20 发布

Null_Bugs

最新推荐文章于 2021-09-08 17:51:20 发布

阅读量344

点赞数

分类专栏： javascript基础

本文链接：https://blog.csdn.net/Null_Bugs/article/details/101535495

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>三级导航菜单</title>
	</head>
	<style>
		*{
	margin: 0;
	padding: 0;
}
body{
	font-size: 16px;
	background-color:#EDEDED ;
	font-style: inherit;
	color:#757576 ;
}
.main{
	width: 1050px;
	margin: 0 auto;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
a{
	text-decoration: none;
	outline: none;
	color:#757576 ;
}
ul,ol{
	list-style: none;
}
.clear{ 
	clear: both;
}
.clearfix{
	*zoom:1;
}
li{
	float: left;
	display: inline-block;
	width: 120px;
	height: 40px;
	text-align: center;
	line-height: 40px;
}
li a:hover{
	color: red;
}
#frist {
	opacity: 0;
}
#frist li{
	float: none;
	position: relative;
}
 li a:hover{
	color: red;
	transition: all 0.5s;
}
:hover{
	transition: all 2s; 
}
#second {
	opacity: 0;
	margin: -40px 0 0 80px;
	padding: 0px;
	position: absolute;
}
#nav_one:hover #frist{
	opacity:1;
	transition: all 2s;
}
#nav_two:hover #second{
	opa

最低0.47元/天解锁文章

Null_Bugs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js/css导航条三级

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>三级导航菜单</title> </head> <style> *{ margin: 0; padding: 0;}body{ font-size: 1...
复制链接

扫一扫