首页
YouDove
会员
搜索
登录
注册
微信登录
当前位置：
首页
->
社会专题
->
代码效果
div css下拉导航菜单
2016-06-10
|
精选
|
天猫
览1175
在线 1 人
|
关闭
DIV+CSS+JS经典导航条-下拉菜单
了解
酒精度
顶一下
≡
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>DIV CSS下拉菜单</title> <LINK href="ddsmoothmenu.css" type=text/css rel=stylesheet> <style type="text/css"> .ddsmoothmenu { MARGIN: 0px auto; FONT: 12px Verdana; WIDTH: 730px } .ddsmoothmenu UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px;BACKGROUND: #2b9801; Z-INDEX: 100; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } .ddsmoothmenu UL LI { DISPLAY: block; FLOAT: left; WIDTH: 81px; LINE-HEIGHT: 31px; POSITION: relative; TEXT-ALIGN: center } HTML .ddsmoothmenu UL LI { FLOAT: left; WIDTH: 81px; LINE-HEIGHT: 31px; POSITION: relative; TEXT-ALIGN: center } .ddsmoothmenu UL LI A { DISPLAY: block; FONT-WEIGHT: bold; WIDTH: 81px; TEXT-DECORATION: none } .ddsmoothmenu UL LI A:link { COLOR: #fff } .ddsmoothmenu UL LI A:visited { COLOR: #fff } .ddsmoothmenu UL LI A:hover { COLOR: #ffff00 } .ddsmoothmenu UL LI UL { LEFT: 0px; VISIBILITY: hidden; POSITION: absolute } .ddsmoothmenu UL LI UL LI { BACKGROUND: #2b9801; FLOAT: left; WIDTH: 81px; LINE-HEIGHT: 25px; BORDER-BOTTOM: #96d47d 1px solid } .ddsmoothmenu UL LI UL LI A { DISPLAY: block; WIDTH: 81px; TEXT-DECORATION: none } .ddsmoothmenu UL LI UL LI A:hover { BACKGROUND: #51b228 } .ddsmoothmenu UL LI UL LI UL { TOP: 0px } .downarrowclass { DISPLAY: none; POSITION: absolute } .rightarrowclass { DISPLAY: none; POSITION: absolute } .ddshadow { BACKGROUND: silver; LEFT: 0px; WIDTH: 0px; POSITION: absolute; TOP: 0px; HEIGHT: 0px } .toplevelshadow { opacity: 0.8 } </style> <SCRIPT src="daima/js/jquery-1.6.2.min.js" type=text/javascript></SCRIPT> <SCRIPT src="daima/js/ddsmoothmenu.js" type=text/javascript></SCRIPT> </head> <body> <div style=" margin:0 auto; width:100%;"> <DIV class=ddsmoothmenu id=smoothmenu1> <UL> <LI><A href="#">DOVE</A> </LI> <LI><A href="#">DIV+CSS</A> <UL> <LI><A href="#">css手册</A> </LI> <LI><A href="#">css3手册</A> </LI> <LI><A href="#">CSS工具</A> </LI> <LI><A href="#">css教程</A> </LI> <LI><A href="#">css hack</A> </LI> <LI><A href="#" title="css模板">css模块</A> </LI></UL></LI> <LI><A href="#">div css</A> <UL> <LI><A href="#">div css基础</A> </LI> <LI><A href="#">html基础</A> </LI> <LI><A href="#">div css标准</A> </LI> <LI><A href="#">css验证</A> </LI> <LI><A href="#">w3c验证</A> </LI></UL></LI> <LI><A href="#">CSS制作</A> <UL> <LI><A href="#">div css重构</A> </LI> <LI><A href="#">css制作价格</A> </LI> <LI><A href="#">网页重构</A> </LI> <LI><A href="#">div切图</A> </LI> <LI><A href="#">div+css教程</A> </LI></UL></LI> <LI><A href="#">CSS切图</A> <UL> <LI><A href="#">div+css切图</A> </LI> <LI><A href="#">css div切图</A> </LI> <LI><A href="#">css切图</A> </LI> <LI><A href="#">图片转div</A> </LI> <LI><A href="#">div css切图</A> </LI></UL></LI> <LI><A href="#">CSS手册</A> <UL> <LI><A href="#">css2手册</A> </LI> <LI><A href="#">css3手册</A> </LI> <LI><A href="#">CSS在线手册</A> </LI> <LI><A href="#">css编辑器</A> </LI> <LI><A href="#">div</A> </LI></UL></LI> </UL> </DIV> </DIV></DIV> </body> </html>
提示：输入修改代码都可运行！
相关阅读
内容加载中……
关闭
