教程集 > jQuery > jquery 教程 > 正文超漂亮纯css div实现二级下拉菜单

超漂亮纯css div实现二级下拉菜单

发布时间：2023-12-23 编辑：jiaochengji.com

教程集为您提供超漂亮纯css div实现二级下拉菜单等资源，欢迎您收藏本站，我们将为您提供最新的超漂亮纯css div实现二级下拉菜单资源

超漂亮纯css div实现二级下拉菜单

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

<!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>  <title></title>  <meta http-equiv="content-type" content="text/html;charset=gb2312">    <style type="text/css">  *{margin:0;padding:0;color:#000000;}  body{font:12px 楷体_GB2312;}  #nav{  margin:5px;  }  #nav li{  position:relative;  list-style:none;  width:100px;/*宽度调整*/  }  #nav li a{  background:#ccc;  padding:5px;  width:100px;  border-top:1px solid #ccc;  text-decoration:none;  height:25px;  display:block;  text-align:center;line-height:25px;  }  #nav li a:hover{  background:#FFCC00;line-height:25px;height:25px;  }  #nav ul ul{  position:absolute;  top:36px;  left:0px;  visibility:hidden;  }  #nav ul :hover ul{  visibility:visible;  }  #nav ul ul li a{  display:block;  width:100px;  margin:0;  height:25px;  }  #nav table{  position:absolute;  top:0;  left:0;  }  hr{  display:none;  }  </style>  </head>  <body>    <div id="nav">    <ul>      <li>      www.111cn.net  		  		  		<ul>              <li>建站服务</li>              <li>建站代码</li>              <li>站长工具</li>              <li>网页特效</li>         		</ul>  		    	</li>    </ul>    <hr>  </div>  </body>  </html>

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

您可能感兴趣的文章：
导航菜单-左则多层树形下拉菜单
 div css 二级下拉菜单导航代码
 jquery无限层级下拉菜单实现代码
 横向javascript下拉二级菜单效果
 美图秀秀做出漂亮的星空效果教程
 网页特效/js超漂亮下拉菜单效果
 jQuery ul标签下拉菜单演示代码
 Photoshop利用滤镜制作漂亮绚丽烟花教程
 javascript 无限级横向下拉导航菜单效果
 jquery下拉菜单 ul标签下拉菜单的例子

上一篇：js用户名密码登陆注册验证代码[可验证密码强度] 下一篇：超有漂亮放大镜js代码

[关闭]

超漂亮纯css div实现二级下拉菜单

最近更新

浏览排行