[纯css实现二级导航栏]纯css实现二级导航菜单效果

更新时间：2019-11-20 来源：导航菜单手机版 字体：大中小

【www.bbyears.com--导航菜单】

提示：您可以先修改部分代码再运行

HTML代码如下

首页

特约

<li class="tip">签约请求
签约服务

保险

<li class="tip">保险信息
新员投保

订单

<li class="tip">订单管理
评价管理
维修记录

店铺

<li class="tip">店铺设置
店铺信息
维修分类
维修品牌

服务

<li class="tip">投诉管理
退约记录

会费

<li class="tip">年费/保证金
店铺续约

招聘

<li class="tip">招聘信息

统计

<li class="tip">流量统计
销售统计
行业分析

<style>
#nav{
float:left;
margin-left:10px;
margin-top:20px;
}
#nav dl{
float:left;
font-size:14px;
padding-left:5px;
position:relative;
}
#nav dt{
float:left;
display:block;
width:48px;
height:auto;
text-align: center;
line-height:30px;
}
#nav dt a{
color:#999999;
}
 
#nav dl  .first{
color:#fff;
font-weight:bold;
}
#nav .line{
float:left;
margin-top:6px;
margin-left:4px;
}
#nav .triangle{
display:none;
background:url(../images/l_bgs_img.png);
width:21px;
height:13px;
background-position:-256px -11px;
position:relative;
top:41px;
left:14px;
}
#nav dt:hover{
background:#fff;
}
#nav dt:hover a{
color:#000;
}
#nav ul{
display:none;
width:auto;
min-width:90px;
height:auto;
/*outline: 1px solid #000;*/
border:1px solid #000;
border-top:0;
position:absolute;
left:4px;
z-index:2;
 
}
#nav ul .tip{
margin-top:10px;
}
#nav li{
width:auto;
margin:6px 4px;
}
#nav li:hover{
background:#555555;
}
#nav li:hover a{
color:#fff;
}
#nav dt:hover ul{
display:block;
background:#fff;
}

</style>

提示：您可以先修改部分代码再运行

本文来源：http://www.bbyears.com/wangyetexiao/80298.html

链接：http://www.bbyears.com/wangyetexiao/80298.html
[纯css实现二级导航栏]纯css实现二级导航菜单效果(转载时请注明本文出处及链接)

猜你感兴趣

[android studio]Android fragment使用方法与注意事项 2019-11-20
nginx实现负载均衡_nginx实现高性能和可扩展性设计模式 2019-11-20
【炉石传说多少回合平局】炉石传说一回合分胜负解析分享 2019-11-20
【nginx有什么用】Nginx用ngx_cache_purge模块缓存加速支持html伪静态页面 2019-11-20
梦幻西游手游前尘旧梦奖励|梦幻西游前尘旧梦第14章万圣国打法分享 2019-11-20
【centos中查找并替换某个目录下所有文件中的某个字符串】centos中查找并替换某个目录下所有文件中的某个字符串 2019-11-20
[花千骨演员表]花千骨快速赚金币方法分享 2019-11-20
花千骨演员表|花千骨勾玉获取方法分享 2019-11-20
在linux中直接运行|在Linux中直接挂载/卸载LVM分区教程 2019-11-20
战斗吧剑灵官网|战斗吧剑灵各种体力获取方法分享 2019-11-20

本类排行

本类最新

更多>>

[纯css实现二级导航栏]纯css实现二级导航菜单效果

猜你感兴趣

热门标签

本类排行

本类最新