2024年05月06日 织梦 二级 下拉 导航 开始 div 懒猪技术
<!--导航开始-->
<div class="nav_main" aos="fade-down" aos-easing="ease" aos-duration="700">
<div class="nav w1200">
<ul class="list clearfix" id="nav">
<li id="cur" {dede:field name=typeid runphp="yes"}(@me=="")? @me=" class='hover' ":@me="";{/dede:field}><a href="/" title="网站首页">网站首页</a></li>
{dede:channelartlist typeid='top' currentstyle='hover'}
<li><a href="{dede:field name='typeurl'/}" title="{dede:field name='typename'/}" class='{dede:field.currentstyle/}'>{dede:field name='typename'/}</a>
<dl>
{dede:channel type='son' noself='yes'}
<dd><a href="[field:typeurl/]" title="[field:typename/]">[field:typename/]</a> </dd>
{/dede:channel}
</dl>
</li>
{/dede:channelartlist}
</ul>
</div>
</div>
<!--导航结束-->
@charset "UTF-8";
dl, dd {
margin: 0px;
}
.nav_main {
width: 100%;
height: 50px;
line-height: 50px;
background: #187abc;
position: relative;
z-index: 3;
}
.nav .list {
width: 102%;
margin: 0 auto;
height: 50px;
line-height: 50px;
position: relative;
}
.nav_main .nav {
width: 1400px;
margin: 0 auto;
}
.nav_main .nav li {
float: left;
width:125px;
display: block;
position: relative;
z-index: 10;
font-size: 16px;
border-right: 1px solid #0b2d7e;
text-align: center;
}
.nav_main .nav li:first-child {
border-left: 1px solid #0b2d7e;
background: none;
}
.nav_main .nav li:first-child.hover {
background-color: #0185d0;
}
.nav_main .nav li a {
display: block;
color: #fff;
font-size: 16px;
}
.nav_main .nav li a:hover, .nav_main .nav li a.hover, .nav_main .nav li #hover2 {
background: #0185d0;
}
.nav_main .nav dl {
width: 100%;
background: #fff;
position: absolute;
left: 0;
top: 52px;
z-index: 12;
border: 1px solid #0185d0;
}
.nav_main .nav dl {
position: absolute;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#4c91c0, direction=120, strength=5);
opacity: 0;
visibility: hidden;
transition: all .6s ease 0s;
transform: translate3d(0, 10px, 0);
-moz-transform: translate3d(0, 10px, 0);
-webkit-transform: translate3d(0, 10px, 0);
}
.nav_main .nav li:hover dl {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.nav_main .nav dl dd {
line-height: 49px;
height: 49px;
border-top: 1px solid #e5e5e5;
text-align: left;
position: relative;
z-index: 12;
display: block;
width: 100%;
}
.nav_main .nav dl dd:first-child {
border: none;
}
.nav_main .nav dl dd a {
color: #666;
font-size: 16px;
padding: 0;
width: 100%;
text-align: center;
}
.nav_main .nav dl dd a:hover, .nav_main .nav dl dd a.hover {
background: #0185d0;
color: #fff;
}
.nav_main .nav dl dd .three {
position: absolute;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#4c91c0, direction=120, strength=5);
opacity: 0;
visibility: hidden;
transition: all .6s ease 0s;
transform: translate3d(0, 10px, 0);
-moz-transform: translate3d(0, 10px, 0);
-webkit-transform: translate3d(-10px, 0, 0);
}
.nav_main .nav dl dd:hover .three {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
.nav_main .nav dl dd .three {
position: absolute;
left: 158px;
top: 4px;
padding-left: 20px;
color: #666;
z-index: 10;
background: url(../images/menu_bg.png) 12px 10px no-repeat;
}
.nav_main .nav dl dd .three a {
color: #fff;
width: 140px;
font-size: 14px;
background: #0185d0;
text-align: center;
display: block;
height: 39px;
line-height: 39px;
border-top: 1px solid #187abc;
transition: ease-in-out .2s;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.nav_main .nav dl dd .three a:first-child {
border-top: none;
}
.nav_main .nav dl dd .three a:hover {
background: #187abc;
color: #fff;
}
@media screen and ( max-width: 980px ){
.nav_main {
margin-top: -100%;
}
.nav_main .nav li:first-child.hover {
margin-top: -100%;
}
.nav_main .nav li a {
margin-top: -100%;
}
}
本文链接：http://so.lmcjl.com/news/3884/