登录
注册
论坛
共享空间
搜索
帮助
用户名:
密码:
会员
界面
简洁版本
在线
共享社区
互联网资源共享社区
网页资料共享
下拉菜单 效果
帖子标题
编程技巧共享
JAVA编程技巧共享
.NET编程技巧共享
WEB编程相关文章
互联网资源共享社区
商业智能共享
.NET源码共享
JAVA源码共享
开发工具共享
网页资料共享
教学资源共享
娱乐信息共享
精品游戏共享
老猫的理想信息区
技术交流区
业界新闻区
企业招聘
项目供求
广而告之
老猫的理想-共享社区站务区
站务管理
意见投诉
1
/ 1 页
1
跳转
页
查看:
2178
下拉菜单 效果
ajax
个人空间
组别:
版主
性别:
来自:
积分:
176
帖子:
176
注册:
2008-01-04
2008-01-09 16:20
|
只看楼主
树型
|
收藏
|
小
中
大
1
下拉菜单 效果
<br /><br /><div class="msgheader"><div class="right"><a href="###" class="smalltxt" onclick="copycode($('code156_-1'));">[复制到剪贴板]</a></div>CODE:</div><div id="code156_-1" class="msgborder"><style type="text/css"><br /><!--<br />*{margin:0;padding:0;border:0;}<br />body {<br /> font-family: arial, 宋体, serif;<br /> font-size:12px;<br />}<br />#nav {<br /> line-height: 24px; list-style-type: none; background:#666;<br />}<br />#nav a {<br /> display: block; width: 80px; text-align:center;<br />}<br />#nav a:link {<br /> color:#666; text-decoration:none;<br />}<br />#nav a:visited {<br /> color:#666;text-decoration:none;<br />}<br />#nav a:hover {<br /> color:#FFF;text-decoration:none;font-weight:bold;<br />}<br />#nav li {<br /> float: left; width: 80px; background:#CCC;<br />}<br />#nav li a:hover{<br /> background:#999;<br />}<br />#nav li ul {<br /> line-height: 27px; list-style-type: none;text-align:left;<br /> left: -999em; width: 180px; position: absolute;<br />}<br />#nav li ul li{<br /> float: left; width: 180px;<br /> background: #F6F6F6;<br />}<br />#nav li ul a{<br /> display: block; width: 156px;text-align:left;padding-left:24px;<br />}<br />#nav li ul a:link {<br /> color:#666; text-decoration:none;<br />}<br />#nav li ul a:visited {<br /> color:#666;text-decoration:none;<br />}<br />#nav li ul a:hover {<br /> color:#F3F3F3;text-decoration:none;font-weight:normal;<br /> background:#C00;<br />}<br />#nav li:hover ul {<br /> left: auto;<br />}<br />#nav li.sfhover ul {<br /> left: auto;<br />}<br />#content {<br /> clear: left;<br />}<br />--><br /></style><br />javascript部分：<br /><script type=text/javascript><!--//--><![CDATA[//><!--<br />function menuFix() {<br /> var sfEls = document.getElementById("nav").getElementsByTagName("li");<br /> for (var i=0; i<sfEls.length; i++) {<br /> sfEls[i].onmouseover=function() {<br /> this.className+=(this.className.length>0? " ": "") + "sfhover";<br /> }<br /> sfEls[i].onMouseDown=function() {<br /> this.className+=(this.className.length>0? " ": "") + "sfhover";<br /> }<br /> sfEls[i].onMouseUp=function() {<br /> this.className+=(this.className.length>0? " ": "") + "sfhover";<br /> }<br /> sfEls[i].onmouseout=function() {<br /> this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");<br /> }<br /> }<br />}<br />window.onload=menuFix;<br />//--><!]]></script><br />html显示部分：<br /><ul id="nav"><br /><li><a href="http://www.wawaqin.com">产品介绍</a><br /> <ul><br /> <li><a href="http://www.wawaqin.com">产品一</a></li><br /> <li><a href="http://www.wawaqin.com">产品一</a></li><br /> <li><a href="http://www.wawaqin.com">产品一</a></li><br /> <li><a href="http://www.wawaqin.com">产品一</a></li><br /> <li><a href="http://www.wawaqin.com">产品一</a></li><br /> <li><a href="http://www.wawaqin.com">产品一</a></li><br /> </ul><br /></li><br /><li><a href="http://www.wawaqin.com">服务介绍</a><br /> <ul><br /> <li><a href="http://www.wawaqin.com">服务二</a></li><br /> <li><a href="http://www.wawaqin.com">服务二</a></li><br /> <li><a href="http://www.wawaqin.com">服务二</a></li><br /> <li><a href="http://www.wawaqin.com">服务二服务二</a></li><br /> <li><a href="http://www.wawaqin.com">服务二服务二服务二</a></li><br /> <li><a href="http://www.wawaqin.com">服务二</a></li><br /> </ul><br /></li><br /><li><a href="http://www.wawaqin.com">成功案例</a><br /> <ul><br /> <li><a href="http://www.wawaqin.com">案例三</a></li><br /> <li><a href="http://www.wawaqin.com">案例</a></li><br /> <li><a href="http://www.wawaqin.com">案例三案例三</a></li><br /> <li><a href="http://www.wawaqin.com">案例三案例三案例三</a></li><br /> </ul><br /></li><br /><li><a href="http://www.wawaqin.com">关于我们</a><br /> <ul><br /> <li><a href="http://www.wawaqin.com">我们四</a></li><br /> <li><a href="http://www.wawaqin.com">我们四</a></li><br /> <li><a href="http://www.wawaqin.com">我们四</a></li><br /> <li><a href="http://www.wawaqin.com">我们四111</a></li><br /> </ul><br /></li><br /><li><a href="http://www.wawaqin.com">在线演示</a><br /> <ul><br /> <li><a href="http://www.wawaqin.com">演示</a></li><br /> <li><a href="http://www.wawaqin.com">演示</a></li><br /> <li><a href="http://www.wawaqin.com">演示</a></li><br /> <li><a href="http://www.wawaqin.com">演示演示演示</a></li><br /> <li><a href="http://www.wawaqin.com">演示演示演示</a></li><br /> <li><a href="http://www.wawaqin.com">演示演示</a></li><br /> <li><a href="http://www.wawaqin.com">演示演示演示</a></li><br /> <li><a href="http://www.wawaqin.com">演示演示演示演示演示</a></li><br /> </ul><br /></li><br /><li><a href="http://www.wawaqin.com">联系我们</a><br /> <ul><br /> <li><a href="http://www.wawaqin.com">联系联系联系联系联系</a></li><br /> <li><a href="http://www.wawaqin.com">联系联系联系</a></li><br /> <li><a href="http://www.wawaqin.com">联系</a></li><br /> <li><a href="http://www.wawaqin.com">联系联系</a></li><br /> <li><a href="http://www.wawaqin.com">联系联系</a></li><br /> <li><a href="http://www.wawaqin.com">联系联系联系</a></li><br /> <li><a href="http://www.wawaqin.com">联系联系联系</a></li><br /> </ul><br /></li><br /></ul></div><br /><br />
ajax 最后编辑于 2008-01-09 16:24:11
发送短消息
查看公共资料
查找该会员全部帖子
UID:
20
精华:
0
威望:
0
金钱:
42.45 元
状态:
离线
ajax
个人空间
组别:
版主
性别:
来自:
积分:
176
帖子:
176
注册:
2008-01-04
2008-01-09 16:22
|
只看楼主
树型
|
收藏
|
小
中
大
2
回复: 下拉菜单 效果
<br /><br /><div class="msgheader"><div class="right"><a href="###" class="smalltxt" onclick="copycode($('code157_-1'));">[复制到剪贴板]</a></div>CODE:</div><div id="code157_-1" class="msgborder"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU</title><br /><style type="text/css"><br />/* common styling */<br />/* set up the overall width of the menu div, the font and the margins */<br />.menu {<br />font-family: arial, sans-serif; <br />width:750px; <br />margin:0; <br />margin:50px 0;<br />}<br />/* remove the bullets and set the margin and padding to zero for the unordered list */<br />.menu ul {<br />padding:0; <br />margin:0;<br />list-style-type: none;<br />}<br />/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */<br />.menu ul li {<br />float:left; <br />position:relative;<br />}<br />/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */<br />.menu ul li a, .menu ul li a:visited {<br />display:block; <br />text-align:center; <br />text-decoration:none; <br />width:104px; <br />height:30px; <br />color:#000; <br />border:1px solid #fff;<br />border-width:1px 1px 0 0;<br />background:#c9c9a7; <br />line-height:30px; <br />font-size:11px;<br />}<br />/* make the dropdown ul invisible */<br />.menu ul li ul {<br />display: none;<br />}<br />/* specific to non IE browsers */<br />/* set the background and foreground color of the main menu li on hover */<br />.menu ul li:hover a {<br />color:#fff; <br />background:#b3ab79;<br />}<br />/* make the sub menu ul visible and position it beneath the main menu list item */<br />.menu ul li:hover ul {<br />display:block; <br />position:absolute; <br />top:31px; <br />left:0; <br />width:105px;<br />}<br />/* style the background and foreground color of the submenu links */<br />.menu ul li:hover ul li a {<br />display:block; <br />background:#faeec7; <br />color:#000;<br />}<br />/* style the background and forground colors of the links on hover */<br />.menu ul li:hover ul li a:hover {<br />background:#dfc184; <br />color:#000;<br />}<br /></style><br /><!--[if lte IE 6]><br /><style type="text/css"><br />/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */<br />/* Get rid of any default table style */<br />table {<br />border-collapse:collapse;<br />margin:0; <br />padding:0;<br />}<br />/* ignore the link used by 'other browsers' */<br />.menu ul li a.hide, .menu ul li a:visited.hide {<br />display:none;<br />}<br />/* set the background and foreground color of the main menu link on hover */<br />.menu ul li a:hover {<br />color:#fff; <br />background:#b3ab79;<br />}<br />/* make the sub menu ul visible and position it beneath the main menu list item */<br />.menu ul li a:hover ul {<br />display:block; <br />position:absolute; <br />top:32px; <br />left:0; <br />width:105px;<br />}<br />/* style the background and foreground color of the submenu links */<br />.menu ul li a:hover ul li a {<br />background:#faeec7; <br />color:#000;<br />}<br />/* style the background and forground colors of the links on hover */<br />.menu ul li a:hover ul li a:hover {<br />background:#dfc184; <br />color:#000;<br />}<br /></style><br /><![endif]--><br /></head><br /><body><br /><div class="menu"><br /><ul><br /><li><a class="hide" href="../menu/index.html">DEMOS</a><br /><!--[if lte IE 6]><br /><a href="../menu/index.html">DEMOS<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li><br /> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li><br /> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li><br /> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li><br /> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li><br /> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li><br /> <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li><br /> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li><br /> <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="index.html">MENUS</a><br /><!--[if lte IE 6]><br /><a href="index.html">MENUS<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li><br /> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li><br /> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li><br /> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li><br /> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li><br /> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li><br /> <li><a href="circles.html" title="circular links">circular links</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../layouts/index.html">LAYOUTS</a><br /><!--[if lte IE 6]><br /><a href="../layouts/index.html">LAYOUTS<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li><br /> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li><br /> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li><br /> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li><br /> <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../boxes/index.html">BOXES</a><br /><!--[if lte IE 6]><br /><a href="../boxes/index.html">BOXES<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li><br /> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li><br /> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li><br /> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li><br /> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li><br /> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li><br /> <li><a href="circles.html" title="circular links">circular links</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../mozilla/index.html">MOZILLA</a><br /><!--[if lte IE 6]><br /><a href="../mozilla/index.html">MOZILLA<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li><br /> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li><br /> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li><br /> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li><br /> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li><br /> <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li><br /> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li><br /> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li><br /> <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../ie/index.html">EXPLORER</a><br /><!--[if lte IE 6]><br /><a href="../ie/index.html">EXPLORER<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../ie/exampleone.html" title="Example one">example one</a></li><br /> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li><br /> <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../opacity/index.html">OPACITY</a><br /><!--[if lte IE 6]><br /><a href="../opacity/index.html">OPACITY<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li><br /> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li><br /> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li><br /> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /></ul><br /><!-- clear the floats if required --><br /><div class="clear"> </div><br /></div><br /></body><br /></html></div><br /><br />
ajax 最后编辑于 2008-01-09 16:27:39
发送短消息
查看公共资料
查找该会员全部帖子
UID:
20
精华:
0
威望:
0
金钱:
42.45 元
状态:
离线
ajax
个人空间
组别:
版主
性别:
来自:
积分:
176
帖子:
176
注册:
2008-01-04
2008-01-09 16:26
|
只看楼主
树型
|
收藏
|
小
中
大
3
回复: 下拉菜单 效果
<br /><br /><div class="msgheader"><div class="right"><a href="###" class="smalltxt" onclick="copycode($('code158_-1'));">[复制到剪贴板]</a></div>CODE:</div><div id="code158_-1" class="msgborder"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>dropdown˵</title><br /><style type="text/css"><br />/* common styling */<br />.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}<br />.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 #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}<br />.menu ul {padding:0; margin:0;list-style-type: none; }<br />.menu ul li {float:left; margin-right:1px; position:relative;}<br />.menu ul li ul {display: none;}<br />/* specific to non IE browsers */<br />.menu ul li:hover a {color:#fff; background:#36f;}<br />.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}<br />.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}<br />.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}<br />.menu ul li:hover ul li ul {display: none;}<br />.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}<br />.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}<br />.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}<br />.menu ul li:hover ul li:hover ul.left {left:-105px;}<br /></style><br /><!--[if lte IE 6]><br /><style type="text/css"><br />.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}<br />.menu ul li a:hover ul li a.hide {display:none;}<br />.menu ul li a:hover {color:#fff; background:#36f;}<br />.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}<br />.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}<br />.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}<br />.menu ul li a:hover ul li a ul {visibility:hidden;}<br />.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}<br />.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}<br />.menu ul li a:hover ul li a:hover ul.left {left:-105px;}<br /></style><br /><![endif]--><br /></head><br /><body><br /><div class="menu"><br /><ul><br /><li><a class="hide" href="../menu/index.html">DEMOS</a><br /><!--[if lte IE 6]><br /><a href="../menu/index.html">DEMOS<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li><br /> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li><br /> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li><br /> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li><br /> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a><br /> <!--[if lte IE 6]><br /> <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ><br /> <table><tr><td><br /> <![endif]--><br /> <ul><br /> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li><br /> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li><br /> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li><br /> </ul><br /> <!--[if lte IE 6]><br /> </td></tr></table><br /> </a><br /> <![endif]--><br /> </li><br /> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li><br /> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li><br /> <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li><br /> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li><br /> <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="index.html">MENUS</a><br /><!--[if lte IE 6]><br /><a href="index.html">MENUS<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li><br /> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li><br /> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li><br /> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li><br /> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li><br /> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li><br /> <li><a href="circles.html" title="circular links">circular links</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../layouts/index.html">LAYOUTS</a><br /><!--[if lte IE 6]><br /><a href="../layouts/index.html">LAYOUTS<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li><br /> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li><br /> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li><br /> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li><br /> <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../boxes/index.html">BOXES</a><br /><!--[if lte IE 6]><br /><a href="../boxes/index.html">BOXES<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li><br /> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li><br /> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li><br /> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li><br /> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li><br /> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li><br /> <li><a href="circles.html" title="circular links">circular links</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../mozilla/index.html">MOZILLA</a><br /><!--[if lte IE 6]><br /><a href="../mozilla/index.html">MOZILLA<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li><br /> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li><br /> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li><br /> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li><br /> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li><br /> <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li><br /> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li><br /> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li><br /> <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../ie/index.html">EXPLORER</a><br /><!--[if lte IE 6]><br /><a href="../ie/index.html">EXPLORER<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../ie/exampleone.html" title="Example one">example one</a></li><br /> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li><br /> <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../opacity/index.html">OPACITY</a><br /><!--[if lte IE 6]><br /><a href="../opacity/index.html">OPACITY<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li><br /> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li><br /> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li><br /> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li><br /> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a><br /> <!--[if lte IE 6]><br /> <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK<br /> <table><tr><td><br /> <![endif]--><br /> <ul class="left"><br /> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li><br /> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li><br /> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li><br /> </ul><br /> <!--[if lte IE 6]><br /> </td></tr></table><br /> </a><br /> <![endif]--><br /> </li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /></ul><br /></div><br /></body><br /></html></div><br /><br />
发送短消息
查看公共资料
查找该会员全部帖子
UID:
20
精华:
0
威望:
0
金钱:
42.45 元
状态:
离线
ajax
个人空间
组别:
版主
性别:
来自:
积分:
176
帖子:
176
注册:
2008-01-04
2008-01-09 16:30
|
只看楼主
树型
|
收藏
|
小
中
大
4
回复: 下拉菜单 效果
<br /><br /><div class="msgheader"><div class="right"><a href="###" class="smalltxt" onclick="copycode($('code159_-1'));">[复制到剪贴板]</a></div>CODE:</div><div id="code159_-1" class="msgborder"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title> </title><br /><style type="text/css"><br />/* common styling */<br />.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}<br />.menu ul {padding:0; margin:0; list-style-type: none;}<br />.menu ul li {float:left; border-left:1px solid #eee; width:106px;}<br />.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}<br />.menu ul li ul {display: none;}<br />/* specific to non IE browsers */<br />.menu ul li:hover a {color:#fff; background:#b3ab79;}<br />.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}<br />.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}<br />.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}<br />.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}<br />.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}<br />.menu ul li:hover ul li ul {display: none;}<br />.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}<br />.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}<br />.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}<br />.menu ul li:hover ul.right li {float:right;}<br />.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}<br />.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}<br />.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}<br /></style><br /><!--[if lte IE 6]><br /><style type="text/css"><br />table {border-collapse:collapse; margin:0; padding:0;}<br />.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}<br />.menu ul li a:hover ul li a.hide {display:none;}<br />.menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;}<br />.menu ul li a:hover {color:#fff; background:#b3ab79;}<br />.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}<br />.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}<br />.menu ul li a:hover ul.left_side li {float:left;}<br />.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;}<br />.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}<br />.menu ul li a:hover ul li a ul {visibility:hidden;}<br />.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}<br />.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}<br />.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}<br />.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}<br /></style><br /><![endif]--><br /></head><br /><body><br /><div class="menu"><br /><ul><br /><li><a class="hide" href="../menu/index.html">DEMOS</a><br /><!--[if lte IE 6]><br /><a href="../menu/index.html">DEMOS<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li><br /> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li><br /> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li><br /> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li><br /> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a><br /> <!--[if lte IE 6]><br /> <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK<br /> <table><tr><td><br /> <![endif]--><br /> <ul class="right_side"><br /> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li><br /> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li><br /> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li><br /> </ul><br /> <!--[if lte IE 6]><br /> </td></tr></table><br /> </a><br /> <![endif]--><br /> </li><br /> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li><br /> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="index.html">MENUS</a><br /><!--[if lte IE 6]><br /><a href="index.html">MENUS<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li><br /> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li><br /> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li><br /> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li><br /> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li><br /> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li><br /> <li><a href="circles.html" title="circular links">circular links</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../layouts/index.html">LAYOUTS</a><br /><!--[if lte IE 6]><br /><a href="../layouts/index.html">LAYOUTS<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li><br /> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li><br /> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li><br /> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li><br /> <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../boxes/index.html">BOXES</a><br /><!--[if lte IE 6]><br /><a href="../boxes/index.html">BOXES<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li><br /> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li><br /> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li><br /> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li><br /> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li><br /> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li><br /> <li><a href="circles.html" title="circular links">circular links</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../mozilla/index.html">MOZILLA</a><br /><!--[if lte IE 6]><br /><a href="../mozilla/index.html">MOZILLA<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li><br /> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li><br /> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li><br /> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li><br /> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li><br /> <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li><br /> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../ie/index.html">EXPLORER</a><br /><!--[if lte IE 6]><br /><a href="../ie/index.html">EXPLORER<br /><table><tr><td><br /><![endif]--><br /> <ul class="right_side"><br /> <li><a href="../ie/exampleone.html" title="Example one">example one</a></li><br /> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li><br /> <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../opacity/index.html">OPACITY</a><br /><!--[if lte IE 6]><br /><a href="../opacity/index.html">OPACITY<br /><table><tr><td><br /><![endif]--><br /> <ul class="right_side"><br /> <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li><br /> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li><br /> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li><br /> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li><br /> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a><br /> <!--[if lte IE 6]><br /> <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK<br /> <table><tr><td><br /> <![endif]--><br /> <ul class="left_side"><br /> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li><br /> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li><br /> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li><br /> </ul><br /> <!--[if lte IE 6]><br /> </td></tr></table><br /> </a><br /> <![endif]--><br /> </li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /></ul><br /></div><br /></body><br /></html></div><br /><br />
ajax 最后编辑于 2008-01-09 16:32:40
发送短消息
查看公共资料
查找该会员全部帖子
UID:
20
精华:
0
威望:
0
金钱:
42.45 元
状态:
离线
ajax
个人空间
组别:
版主
性别:
来自:
积分:
176
帖子:
176
注册:
2008-01-04
2008-01-09 16:32
|
只看楼主
树型
|
收藏
|
小
中
大
5
回复: 下拉菜单 效果
<br /><br /><div class="msgheader"><div class="right"><a href="###" class="smalltxt" onclick="copycode($('code160_-1'));">[复制到剪贴板]</a></div>CODE:</div><div id="code160_-1" class="msgborder"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>upmenu</title><br /><style type="text/css"><br />/* common styling */<br />.menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;}<br />.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; background:#c9c9a7; line-height:25px; font-size:11px;}<br />.menu ul {padding:0; margin:0;list-style-type: none; }<br />.menu ul li {float:left; position:relative;}<br />.menu ul li ul {display: none;}<br />/* specific to non IE browsers */<br />.menu ul li:hover a {color:#000; background:#e9e9c7;}<br />.menu ul li:hover ul {display:block; position:absolute; bottom:26px; left:0;}<br />.menu ul li:hover ul li a.hide {background:#a7c9c9; color:#000;}<br />.menu ul li:hover ul li {display:block; background:#fff; color:#000;width:199px; clear:both;}<br />.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}<br />.menu ul li:hover ul li ul {display: none;}<br />.menu ul li:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;}<br />.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}<br />.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:210px; bottom:0;}<br />.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}<br />.menu ul li:hover ul li:hover ul li a:hover {background:#c9c9a7; color:#000;}<br />.menu ul li:hover ul.left {left:-105px;}<br />.menu ul li:hover ul li:hover ul.left {left:-210px; width:209px;}<br /></style><br /><!--[if lte IE 6]><br /><style type="text/css"><br />table {border-collapse:collapse; margin:0; padding:0;}<br />.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}<br />.menu ul li a:hover ul li a.hide {display:none;}<br />.menu ul li a:hover {color:#000; background:#e9e9c7;}<br />.menu ul li a:hover ul {display:block; position:absolute; bottom:26px; left:0;}<br />.menu ul li a:hover ul li {display:block; background:#fff; color:#000; width:199px;}<br />.menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#000;}<br />.menu ul li a:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;}<br />.menu ul li a:hover ul li a ul {visibility:hidden;}<br />.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}<br />.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:210px; bottom:0;}<br />.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}<br />.menu ul li a:hover ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;}<br />.menu ul li a:hover ul.left {left:-105px;}<br />.menu ul li a:hover ul li a:hover ul.left {left:-210px;}<br /></style><br /><![endif]--><br /></head><br /><body><br /><p> </p><br /><p> </p><br /><p> </p><br /><p> </p><br /><p> </p><br /><p> </p><br /><p> </p><br /><p> </p><br /><p> </p><br /><div class="menu"><br /><ul><br /><li><a class="hide" href="../menu/index.html">DEMOS</a><br /><!--[if lte IE 6]><br /><a href="../menu/index.html">DEMOS<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li><br /> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li><br /> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li><br /> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li><br /> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a><br /> <!--[if lte IE 6]><br /> <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ><br /> <table><tr><td><br /> <![endif]--><br /> <ul><br /> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li><br /> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li><br /> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li><br /> </ul><br /> <!--[if lte IE 6]><br /> </td></tr></table><br /> </a><br /> <![endif]--><br /> </li><br /> <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li><br /> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li><br /> <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li><br /> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li><br /> <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="index.html">MENUS</a><br /><!--[if lte IE 6]><br /><a href="index.html">MENUS<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li><br /> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li><br /> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li><br /> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li><br /> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li><br /> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li><br /> <li><a href="circles.html" title="circular links">circular links</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../layouts/index.html">LAYOUTS</a><br /><!--[if lte IE 6]><br /><a href="../layouts/index.html">LAYOUTS<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li><br /> <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li><br /> <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li><br /> <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li><br /> <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../boxes/index.html">BOXES</a><br /><!--[if lte IE 6]><br /><a href="../boxes/index.html">BOXES<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="spies.html" title="a coded list of spies">spies menu</a></li><br /> <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li><br /> <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li><br /> <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li><br /> <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li><br /> <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li><br /> <li><a href="circles.html" title="circular links">circular links</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../mozilla/index.html">MOZILLA</a><br /><!--[if lte IE 6]><br /><a href="../mozilla/index.html">MOZILLA<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li><br /> <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li><br /> <li><a href="../mozilla/content.html" title="Using content:">content:</a></li><br /> <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li><br /> <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li><br /> <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li><br /> <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li><br /> <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li><br /> <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../ie/index.html">EXPLORER</a><br /><!--[if lte IE 6]><br /><a href="../ie/index.html">EXPLORER<br /><table><tr><td><br /><![endif]--><br /> <ul><br /> <li><a href="../ie/exampleone.html" title="Example one">example one</a></li><br /> <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li><br /> <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /><li><a class="hide" href="../opacity/index.html">OPACITY</a><br /><!--[if lte IE 6]><br /><a href="../opacity/index.html">OPACITY<br /><table><tr><td><br /><![endif]--><br /> <ul class="left"><br /> <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a><br /> <!--[if lte IE 6]><br /> <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK<br /> <table><tr><td><br /> <![endif]--><br /> <ul class="left"><br /> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li><br /> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li><br /> <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li><br /> </ul><br /> <!--[if lte IE 6]><br /> </td></tr></table><br /> </a><br /> <![endif]--><br /> </li><br /> <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li><br /> <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li><br /> <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li><br /> <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li><br /> </ul><br /><!--[if lte IE 6]><br /></td></tr></table><br /></a><br /><![endif]--><br /></li><br /></ul><br /></div><br /></body><br /></html></div><br /><br />
发送短消息
查看公共资料
查找该会员全部帖子
UID:
20
精华:
0
威望:
0
金钱:
42.45 元
状态:
离线
ajax
个人空间
组别:
版主
性别:
来自:
积分:
176
帖子:
176
注册:
2008-01-04
2008-01-09 16:35
|
只看楼主
树型
|
收藏
|
小
中
大
6
回复: 下拉菜单 效果
<br /><br /><div class="msgheader"><div class="right"><a href="###" class="smalltxt" onclick="copycode($('code161_-1'));">[复制到剪贴板]</a></div>CODE:</div><div id="code161_-1" class="msgborder"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /><title>nav</title><br /><script language="javascript"><br />// JavaScript Document<br />startList = function() {<br />if (document.all&&document.getElementById) {<br />navRoot = document.getElementById("nav");<br />for (i=0; i<navRoot.childNodes.length; i++) {<br />node = navRoot.childNodes[i];<br />if (node.nodeName=="LI") {<br />node.onmouseover=function() {<br />this.className+=" over";<br /> }<br /> node.onmouseout=function() {<br /> this.className=this.className.replace(" over", "");<br /> }<br /> }<br /> }<br /> }<br />}<br />window.onload=startList;<br /></script><br /><style type="text/css"><br /><!--<br />body {<br /> font: normal 11px verdana;<br /> }<br />ul {<br /> margin: 0;<br /> padding: 0;<br /> list-style: none;<br /> width: 150px; /* Width of Menu Items */<br /> border-bottom: 1px solid #ccc;<br /> }<br /> <br />ul li {<br /> position: relative;<br /> }<br /> <br />li ul {<br /> position: absolute;<br /> left: 149px; /* Set 1px less than menu width */<br /> top: 0;<br /> display: none;<br /> }<br />/* Styles for Menu Items */<br />ul li a {<br /> display: block;<br /> text-decoration: none;<br /> color: #777;<br /> background: #fff; /* IE6 Bug */<br /> padding: 5px;<br /> border: 1px solid #ccc; /* IE6 Bug */<br /> border-bottom: 0;<br /> }<br /> <br />/* Holly Hack. IE Requirement \*/<br />* html ul li { float: left; height: 1%; }<br />* html ul li a { height: 1%; }<br />/* End */<br />li:hover ul, li.over ul { display: block; } /* The magic */<br />--><br /></style><br /></head><br /><body><br /><ul id="nav"> <br /> <li><a href="#">Home</a></li> <br /> <li><a href="#">About</a> <br /> <ul> <br /> <li><a href="#">History</a></li> <br /> <li><a href="#">Team</a></li> <br /> <li><a href="#">Offices</a></li> <br /> </ul> <br /> </li> <br /> <li><a href="#">Services</a> <br /> <ul> <br /> <li><a href="#">Web Design</a></li> <br /> <li><a href="#">Internet Marketing</a></li> <br /> <li><a href="#">Hosting</a></li> <br /> <li><a href="#">Domain Names</a></li> <br /> <li><a href="#">Broadband</a></li> <br /> </ul> <br /> </li> <br /> <li><a href="#">Contact Us</a> <br /> <ul> <br /> <li><a href="#">United Kingdom</a></li> <br /> <li><a href="#">France</a></li> <br /> <li><a href="#">USA</a></li> <br /> <li><a href="#">Australia</a></li> <br /> </ul> <br /> </li> <br /></ul> <br /></body><br /></html></div><br /><br />
发送短消息
查看公共资料
查找该会员全部帖子
UID:
20
精华:
0
威望:
0
金钱:
42.45 元
状态:
离线
<<
上一主题
|
下一主题
>>
1
/ 1 页
1
跳转
页
论坛跳转...
编程技巧共享
JAVA编程技巧共享
.NET编程技巧共享
WEB编程相关文章
互联网资源共享社区
商业智能共享
.NET源码共享
JAVA源码共享
开发工具共享
网页资料共享
教学资源共享
娱乐信息共享
精品游戏共享
老猫的理想信息区
技术交流区
业界新闻区
企业招聘
项目供求
广而告之
老猫的理想-共享社区站务区
站务管理
意见投诉
我的主题
我的帖子
我的精华
我的空间
帖子标题
空间日志
相册标题
作 者
我的主题
我的帖子
我的附件
我的精华
我的空间
