PHP群：95885625 Hbuilder+MUI群：81989597 站长QQ：634381967
|
积分获取
|
给我留言
|
tag标签
首页
开发编程
PHP教程
ASP.NET教程
Jquery教程
Unity3D教程
JavaScript教程
HTML+CSS
ThinkPhp教程
Smarty教程
正则表达式
编程杂谈
HTML5+CSS3教程
HBuilderX教程
AngularJS教程
Laravel教程
iOS开发教程
Java教程
小程序开发
提供网页设计教程和后台编程技术
CMS教程
phpcms教程
dedecms教程
wordpress教程
ecshop教程
帝国cms教程
discuz教程
齐博cms教程
ShopNc教程
提供主流cms教程
数据库
MySQL教程
SQL Server教程
NoSql数据库
提供数据库教程和设计
JS特效
HTML5+CSS3特效
焦点图
菜单导航
广告特效
对联广告
在线客服
相册特效
图片特效
悬浮漂浮
滚动特效
Tab选项卡
瀑布流
手机js特效
弹出层(框)
日期时间
网页模板
其它特效
提供各种常见网页js代码
网页特效
HTML5+CSS3
鼠标特效
文字特效
导航菜单
表格图层
Tab选项卡
图片特效
时间日期
网站常用
提供常用的JS特效代码及在线演示
Jquery插件
jQuery日期时间
jQuery弹出层
jQuery筛选排序
jQuery滚动插件
jQuery工具提示
jQuery音频视频
jQuery选项卡
jQuery图片裁剪
jQuery常用插件
jQuery导航菜单
提供jQuery插件教程及插件下载
服务器
Linux教程
Web服务器
提供服务器常见问题及教程
站长学院
seo技巧
建站经验
网络营销
站长资讯
好文分享
网络推广
互联网资讯
提供站长技术、站长资讯等内容
工具&手册
Base64编码加密
正则测试工具
Css压缩/格式化
jQuery手册
md5加密
CSS3
帝国cms开发手册
DEDE5.7使用手册
配色词典
C语言库
提供常用开发手册和开发工具
全站搜索
搜索
关键字：
query宽屏
BIT_COUNT
菜单导航
XSS攻击
静态
html
悬浮右侧
个人站长
您现在的位置：
首页
>
网页特效
>
导航菜单
> 正文
纯div+css制作的竖向三级弹出菜单（二）
作者：w634381967
来源：
B5教程网
浏览：
次
时间：2020-10-24 21:11:49
我要评论
分享到
内容介绍
纯div+css制作的竖向三级弹出菜单（二）
，效果非常不错，并且没有js代码，
B5教程网
推荐下载！
B5教程网
，站长必备
js网页特效
及js广告代码，提供高质量
js特效下载
。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>纯div+css制作的竖向三级弹出菜单（二）</title> <style type="text/css"> /* common styling */ .menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #aaa; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#36f;} .menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;} .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#eee; color:#000;} .menu ul li:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} </style> <!--[if lte IE 6]> <style type="text/css"> .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a:hover {color:#fff; background:#36f;} .menu ul li a:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;} .menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} .menu ul li a:hover ul li a {display:block; background:#eee; color:#000;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;} </style> <![endif]--> </head> <body> <style> ul#bcty365_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;} ul#bcty365_nav li{float:left; display:inline; margin:10px;} ul#bcty365_nav li a{display:block; font-size:16px;} ul#bcty365_nav li a,#wimoban_p,#wimoban_p a{ font-family:"微软雅黑";} ul#bcty365_nav li a:hover,#wimoban_p a:hover{color:red;} </style> <ul id="bcty365_nav"> <li><a title="首页" href="http://www.bcty365.com/">首页</a></li> <li><a title="网站开发" href="http://www.bcty365.com/list-9-1.html">网站开发</a></li> <li><a title="数据库" href="http://www.bcty365.com/list-34-1.html">数据库</a></li> <li><a title="js特效代码" href="http://www.bcty365.com/list-12-1.html">js特效代码</a></li> <li><a title="网页特效" href="http://www.bcty365.com/list-61-1.html">网页特效</a></li> <li><a title="jQuery插件" href="http://www.bcty365.com/list-86-1.html">jQuery插件</a></li> <li><a title="站长频道" href="http://www.bcty365.com/list-96-1.html">站长频道</a></li> </ul> <div class="menu"> <ul> <li><a class="hide" href="http://www.bcty365.com/">DEMOS</a> <!--[if lte IE 6]> <a href="../menu/index.html">DEMOS <table><tr><td> <![endif]--> <ul> <li><a href="http://www.bcty365.com/" title="The zero dollar ads page">zero dollars</a></li> <li><a href="http://www.bcty365.com/" title="Wrapping text around images">wrapping text</a></li> <li><a href="http://www.bcty365.com/" title="Styling forms">styled form</a></li> <li><a href="http://www.bcty365.com/" title="Removing active/focus borders">active focus</a></li> <li><a class="hide" href="http://www.bcty365.com/" title="Hover/click with no active/focus borders">HOVER/CLICK ></a> <!--[if lte IE 6]> <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK > <table><tr><td> <![endif]--> <ul> <li><a href="http://www.bcty365.com/" title="Styling forms">styled form</a></li> <li><a href="http://www.bcty365.com/" title="Removing active/focus borders">active focus</a></li> <li><a href="http://www.bcty365.com/" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a href="http://www.bcty365.com/" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="http://www.bcty365.com/" title="Image Map for detailed information">image map</a></li> <li><a href="http://www.bcty365.com/" title="fun with background images">fun backgrounds</a></li> <li><a href="http://www.bcty365.com/" title="fade-out scrolling">fade scrolling</a></li> <li><a href="http://www.bcty365.com/" title="em size images compared">em sized images</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="http://www.bcty365.com/">MENUS</a> <!--[if lte IE 6]> <a href="index.html">MENUS <table><tr><td> <![endif]--> <ul> <li><a href="http://www.bcty365.com/" title="a coded list of spies">spies menu</a></li> <li><a href="http://www.bcty365.com/" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="http://www.bcty365.com/" title="an enlarging unordered list">enlarging list</a></li> <li><a href="http://www.bcty365.com/" title="an unordered list with link images">link images</a></li> <li><a href="http://www.bcty365.com/" title="non-rectangular links">non-rectangular</a></li> <li><a href="http://www.bcty365.com/" title="jigsaw links">jigsaw links</a></li> <li><a href="http://www.bcty365.com/" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="http://www.bcty365.com/">LAYOUTS</a> <!--[if lte IE 6]> <a href="../layouts/index.html">LAYOUTS <table><tr><td> <![endif]--> <ul> <li><a href="http://www.bcty365.com/" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="http://www.bcty365.com/" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="http://www.bcty365.com/" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="http://www.bcty365.com/" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="http://www.bcty365.com/" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="http://www.bcty365.com/">BOXES</a> <!--[if lte IE 6]> <a href="../boxes/index.html">BOXES <table><tr><td> <![endif]--> <ul> <li><a href="http://www.bcty365.com/" title="a coded list of spies">spies menu</a></li> <li><a href="http://www.bcty365.com/" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="http://www.bcty365.com/" title="an enlarging unordered list">enlarging list</a></li> <li><a href="http://www.bcty365.com/" title="an unordered list with link images">link images</a></li> <li><a href="http://www.bcty365.com/" title="non-rectangular links">non-rectangular</a></li> <li><a href="http://www.bcty365.com/" title="jigsaw links">jigsaw links</a></li> <li><a href="http://www.bcty365.com/" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="http://www.bcty365.com/">MOZILLA</a> <!--[if lte IE 6]> <a href="../mozilla/index.html">MOZILLA <table><tr><td> <![endif]--> <ul> <li><a href="http://www.bcty365.com/" title="A drop down menu">drop down menu</a></li> <li><a href="http://www.bcty365.com/" title="A cascading menu">cascading menu</a></li> <li><a href="http://www.bcty365.com/" title="Using content:">content:</a></li> <li><a href="http://www.bcty365.com/" title=":hover applied to a div">mozzie box</a></li> <li><a href="http://www.bcty365.com/" title="I can build a rainbow">rainbow box</a></li> <li><a href="http://www.bcty365.com/" title="Snooker cue">snooker cue</a></li> <li><a href="http://www.bcty365.com/" title="Target Practise">target practise</a></li> <li><a href="http://www.bcty365.com/" title="Two tone headings">two tone headings</a></li> <li><a href="http://www.bcty365.com/" title="Shadow text">shadow text</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="http://www.bcty365.com/">EXPLORER</a> <!--[if lte IE 6]> <a href="../ie/index.html">EXPLORER <table><tr><td> <![endif]--> <ul> <li><a href="http://www.bcty365.com/" title="Example one">example one</a></li> <li><a href="http://www.bcty365.com/" title="Weft fonts">weft fonts</a></li> <li><a href="http://www.bcty365.com/" title="Vertical align">vertical align</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="http://www.bcty365.com/">OPACITY</a> <!--[if lte IE 6]> <a href="../opacity/index.html">OPACITY <table><tr><td> <![endif]--> <ul> <li><a href="http://www.bcty365.com/" title="colour wheel">opaque colours</a></li> <li><a href="http://www.bcty365.com/" title="a menu using opacity">opaque menu</a></li> <li><a href="http://www.bcty365.com/" title="partial opacity">partial opacity</a></li> <li><a href="http://www.bcty365.com/" title="partial opacity II">partial opacity II</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> </div> </body> </html>
本站所有特效都是站长亲自测试后发布的，如果运行代码无效果，请复制到您的本机运行
运行代码
复制代码
另存代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
转载请注明（B5教程网）原文链接：：
https://b5.mxunkeji.com/content-76-82-1.html
相关热词搜索：
三级导航
导航菜单
js网页特效
弹出菜单
上一篇：
纯div+css制作的二级弹出菜单（一）
下一篇：
纯div+css制作的二级弹出菜单（三）
最新推荐
[
网络推广
]
24h无人值守共享自助洗车解
[
网络推广
]
微信小程商家wifi码是什么？
[
网络推广
]
企业光伏数据对接碳达峰系统
[
互联网资讯
]
CentOS官方已计划停止维护Ce
[
PHP教程
]
PHP 主力开发因生活压力不
[
网络营销
]
抖音自动关注、自动点赞、自
[
网络推广
]
阿里云优惠券|阿里云代金券|
[
网络推广
]
阿里云 ECS实例升级、续费
[
互联网资讯
]
我名下有几张移动电话卡？有
[
互联网资讯
]
互联网平台相互屏蔽网址链接
本周排行
[
导航菜单
]
纯css实现二级左右导航菜单特效
[
导航菜单
]
纯div+css制作的二级弹出菜单（一）
[
导航菜单
]
一个简单的树状导航菜单
[
导航菜单
]
纯css制作倾斜效果导航菜单
[
导航菜单
]
仿土豆网的焦点图片轮换效果
[
导航菜单
]
纯div+CSS实现的无限级下拉菜单效果代码
[
导航菜单
]
js折叠跳动导航菜单
[
导航菜单
]
纯div+css制作的二级弹出菜单（三）
[
导航菜单
]
js实现菜单栏无限折叠特效
[
导航菜单
]
简单和易懂的js树形菜单
关于我们
关于我们
赞助我们
加入我们
版权声明
联系我们
联系我们
QQ技术群
合作方式
广告服务
业务合作
常见问题
意见反馈
网站地图
在线投稿
积分获取
在线充值
本站不承担任何版权问题，如果我们侵犯了您的利益，请来信
告知(634381967@qq.com)，我们会在第一时间处理！
© 苏ICP备20040182号
B5教程网 版权所有
