教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 CSS实现带小箭头二级下拉导航菜单

CSS实现带小箭头二级下拉导航菜单

发布时间:2016-10-16   编辑:jiaochengji.com
教程集为您提供CSS实现带小箭头二级下拉导航菜单等资源,欢迎您收藏本站,我们将为您提供最新的CSS实现带小箭头二级下拉导航菜单资源
文章分享一篇关于CSS实现带小箭头二级下拉导航菜单,有需要的朋友们可以参考本效果。
提示:您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS实现带小箭头二级下拉导航菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> * { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; BORDER-RIGHT-WIDTH: 0px } BODY { FONT: 12px Arial, sans-serif; COLOR: #666 } A { COLOR: #555; TEXT-DECORATION: none } A:hover { COLOR: #e33; TEXT-DECORATION: underline } #selectedI #mI { FONT-WEIGHT: bold; BACKGROUND: url(/blog/upload/image/20120525072202.gif) no-repeat -260px -40px; COLOR: #f33; margin:0 auto; } .hNav { CLEAR: both; PADDING-RIGHT: 2px; PADDING-LEFT: 3px; BACKGROUND: url(/blog/upload/image/20120525072202.gif) no-repeat left top; PADDING-BOTTOM: 5px; WIDTH: 891px; PADDING-TOP: 3px; HEIGHT: 29px; margin:0 auto; } .hNav UL LI { FLOAT: left; OVERFLOW: hidden; WIDTH: 99px; LINE-HEIGHT: 29px; HEIGHT: 29px; TEXT-ALIGN: center } .hNav UL LI A { DISPLAY: block; OVERFLOW: hidden; WIDTH: 99px; CURSOR: pointer; COLOR: #fff; WHITE-SPACE: nowrap; HEIGHT: 29px } .hNav UL LI A:hover { BACKGROUND: url(/blog/upload/image/20120525072202.gif) no-repeat -260px -40px; COLOR: #f33; TEXT-DECORATION: none } .hNav UL LI.over { BACKGROUND: url(/blog/upload/image/20120525072202.gif) no-repeat -260px -40px; OVERFLOW: visible } .hNav UL LI.over UL { Z-INDEX: 2; FILTER: alpha(opacity=80); FLOAT: left; OVERFLOW: auto; POSITION: relative; opacity: 0.8; -moz-opacity: 0.8 } .hNav UL LI.over UL LI { BACKGROUND: #111; LINE-HEIGHT: 24px; HEIGHT: 24px } .hNav UL LI.over UL LI A { MARGIN: 0px 3px; WIDTH: 93px; HEIGHT: 24px } .hNav UL LI.over UL LI A:hover { COLOR: #e00 } .hNav UL LI.over UL LI.e1 { DISPLAY: inline; MARGIN: 0px 1px; OVERFLOW: hidden; WIDTH: 97px; HEIGHT: 1px } .hNav UL LI.over UL LI.e2 { DISPLAY: inline; MARGIN: 0px 1px; OVERFLOW: hidden; WIDTH: 97px; HEIGHT: 1px } .hNav UL LI.over UL LI.e3 { DISPLAY: inline; MARGIN: 0px 1px; OVERFLOW: hidden; WIDTH: 97px; HEIGHT: 1px } .hNav UL LI.over UL LI.e2 { BACKGROUND: #e30 } .hNav UL LI.over UL LI.e3 { BACKGROUND: #e30 } .hNav UL LI.over UL LI.e3 { MARGIN: 0px 3px; WIDTH: 93px } </style> </head> <body>
<ul> <li>首页</li> <li onmouseover="this.className='over'" onmouseout="this.className=''"> 网站导航 <ul> <li>财富</li> <li>外部链接</li> <li>创业</li> <li>感情</li> <li>家庭</li> <li class="e1"></li> <li class="e2"></li> <li class="e3"></li> </ul> </li> <li onmouseover="this.className='over'" onmouseout="this.className=''"> 影印娱乐 <ul> <li>我的DV</li> <li>我的相册</li> <li class="e1"></li> <li class="e2"></li> <li class="e3"></li> </ul> </li> <li onmouseover="this.className='over'" onmouseout="this.className=''"> 新人新事 <ul> <li>天下新闻</li> <li class="e1"></li> <li class="e2"></li> <li class="e3"></li> </ul> <ul> </ul> </li> <li onmouseover="this.className='over'" onmouseout="this.className=''"> 个人作品 <ul> <li>心情感想</li> <li class="e1"></li> <li class="e2"></li> <li class="e3"></li> </ul> </li> <li onmouseover="this.className='over'" onmouseout="this.className=''"> 合作事宜 <ul> <li>项目资金</li> <li class="e1"></li> <li class="e2"></li> <li class="e3"></li> </ul> </li> <li onmouseover="this.className='over'" onmouseout="this.className=''"> 团队建设 <ul> <li>我是团长</li> <li class="e1"></li> <li class="e2"></li> <li class="e3"></li> </ul> </li> <li onmouseover="this.className='over'" onmouseout="this.className=''">联系方式 <ul> <li>联系方式</li> <li class="e1"></li> <li class="e2"></li> <li class="e3"></li> </ul> </li> <li>留言本</li> </ul>
</body> </html></textarea>
提示:您可以先修改部分代码再运行

您可能感兴趣的文章:
CSS实现带小箭头二级下拉导航菜单
前端DIV CSS命名规范大全
div css 二级下拉菜单导航代码
7款风格新颖的jQuery/CSS3菜单导航分享
jQuery菜单插件 Smooth Navigational Menu
jquery下拉菜单 ul标签下拉菜单的例子
jQuery ul标签下拉菜单演示代码
用jquery实现下拉菜单效果的代码
Jquery 下拉菜单的实现代码一例
Jquery下拉菜单(jquery 下拉菜单插件Sexy Drop Down Menu)

[关闭]
~ ~