<!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
js/css导航条三级
最新推荐文章于 2021-09-08 17:51:20 发布
本文介绍如何使用JavaScript和CSS创建交互式的三级导航条,包括菜单项的展开、收起效果,以及响应式设计,确保在不同设备上良好展示。
摘要由CSDN通过智能技术生成