纯CSS实现酷黑风格三级下拉菜单效果代码

本文实例讲述了纯CSS实现酷黑风格三级下拉菜单效果代码。分享给大家供大家参考。具体如下：

这是一款纯CSS酷黑风格三级下拉菜单代码，黑色风格，可支持三级，鼠标移上后显示二级菜单。

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/js/2015/css-black-style-3level-down-show-menu-codes/

具体代码如下：

复制代码代码如下:!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> CSS样式三级下拉菜单/title>
style>
@charset "utf-8";
body{ margin:0px; padding:0px; font-family:Verdana, Geneva, sans-serif; font-Size:12px; color:#FFF; background:url(images/tiTTLePicture.png) no-repeat; }
body a{ color:#FFF; }
.box{ margin:240px auto; padding:0px; width:1000px; }
.box ul{ margin:0px; padding:0px; list-style:none; }
.box ul li{ margin:0px 2px 0px 0px; padding:0px; width:120px; height:35px; display:inline; float:left; background:url(images/zk.png) no-repeat 0 0; border-radius:4px; box-shadow:#000 0px 0px 1px; }
.box ul li:hover ul{ display:block; }
.box ul li a{ text-align:center; width:121px; height:37px; line-height:35px; display:block; text-decoration:none; }
.box ul li ul{ display:none; }
.box ul li ul li{ margin:0px 0px 2px 0px; padding:0px; background:url(images/zkTwo.png) no-repeat; }
.box ul li ul li:hover{ background:#666; }
.box ul li ul li:hover ul{ visibility:visible; }
.box ul li ul li ul{ visibility:hidden; position:relative; top:-37px; left:121px; }
.box ul li ul li ul li{ background:#000; }
/style>
/head>
body>
div class="box">
ul>
li> a href="#"> /a>
ul>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> 技术文章/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> 脚本下载/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
/ul>
/li>
li> a href="#"> 广告联系/a>
ul>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
/ul>
/li>
li> a href="#"> 最新更新/a>
ul>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
/ul>
/li>
li> a href="#"> 源代码下载/a>
ul>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
/ul>
/li>
li> a href="#"> 编程技巧/a>
ul>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
/ul>
/li>
li> a href="/dll"> 编程控件/a>
ul>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> 电子书籍/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
/ul>
/li>
li> a href="#"> 网页特效/a>
ul>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
li> a href="#"> Two-level menu/a>
ul>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
li> a href="#"> Three-level menu/a> /li>
/ul>
/li>
/ul>
/li>
/ul>
/div>
/body>
/html>

希望本文所述对大家的div+css程序设计有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！