资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
css+js下拉菜单
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 180px; position: absolute; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ display: block; width: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } --> </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3Dtext%2Fjavascript%3E%3C!--%2F%2F--%3E%3C!%5BCDATA%5B%2F%2F%3E%3C!--%20%0D%0Afunction%20menuFix()%20%7B%20%0D%0Avar%20sfEls%20%3D%20document.getElementById(%22nav%22).getElementsByTagName(%22li%22)%3B%20%0D%0Afor%20(var%20i%3D0%3B%20i%3CsfEls.length%3B%20i%2B%2B)%20%7B%20%0D%0AsfEls%5Bi%5D.onmouseover%3Dfunction()%20%7B%20%0D%0Athis.className%2B%3D(this.className.length%3E0%3F%20%22%20%22%3A%20%22%22)%20%2B%20%22sfhover%22%3B%20%0D%0A%7D%20%0D%0AsfEls%5Bi%5D.onMouseDown%3Dfunction()%20%7B%20%0D%0Athis.className%2B%3D(this.className.length%3E0%3F%20%22%20%22%3A%20%22%22)%20%2B%20%22sfhover%22%3B%20%0D%0A%7D%20%0D%0AsfEls%5Bi%5D.onMouseUp%3Dfunction()%20%7B%20%0D%0Athis.className%2B%3D(this.className.length%3E0%3F%20%22%20%22%3A%20%22%22)%20%2B%20%22sfhover%22%3B%20%0D%0A%7D%20%0D%0AsfEls%5Bi%5D.onmouseout%3Dfunction()%20%7B%20%0D%0Athis.className%3Dthis.className.replace(new%20RegExp(%22(%20%3F%7C%5E)sfhover%5C%5Cb%22)%2C%20%0D%0A%22%22)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Awindow.onload%3DmenuFix%3B%20%0D%0A%2F%2F--%3E%3C!%5D%5D%3E%3C%2Fscript%3E"> </head> <body> <ul id="nav"> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">产品介绍</a> <ul> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">产品一</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">产品一</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">产品一</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">产品一</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">产品一</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">产品一</a></li> </ul> </li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">服务介绍</a> <ul> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">服务二</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">服务二</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">服务二</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">服务二服务二</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">服务二服务二服务二</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">服务二</a></li> </ul> </li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">成功案例</a> <ul> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">案例三</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">案例</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">案例三案例三</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">关于我们</a> <ul> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">我们四</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">我们四</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">我们四</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">我们四111</a></li> </ul> </li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">在线演示</a> <ul> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">演示</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">演示</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">演示</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">演示演示</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">演示演示演示</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">联系我们</a> <ul> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">联系联系联系联系联系</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">联系联系联系</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">联系</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">联系联系</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">联系联系联系</a></li> <li><a href="#" _ewebeditor_ta_href="%23" _fcksavedurl="#">联系联系联系</a></li> </ul> </li> </ul> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
纯css下拉菜单
<!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>老Y天下-网页特效-导航菜单-漂亮的二级下拉菜单</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> /* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { font-family: arial, sans-serif; width:750px; margin:0; margin:50px 0; } /* remove the bullets and set the margin and padding to zero for the unordered list */ .menu ul { padding:0; margin:0; list-style-type: none; } /* 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 */ .menu ul li { float:left; position:relative; } /* 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. */ .menu ul li a, .menu ul li a:visited { display:block; text-align:center; text-decoration:none; width:104px; height:30px; color:#000; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; line-height:30px; font-size:11px; } /* make the dropdown ul invisible */ .menu ul li ul { display: none; } /* specific to non IE browsers */ /* set the background and foreground color of the main menu li on hover */ .menu ul li:hover a { color:#fff; background:#b3ab79; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li:hover ul { display:block; position:absolute; top:31px; left:0; width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li:hover ul li a { display:block; background:#faeec7; color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li:hover ul li a:hover { background:#dfc184; color:#000; } </style> <!--[if lte IE 6]> <style type="text/css"> /* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */ /* Get rid of any default table style */ table { border-collapse:collapse; margin:0; padding:0; } /* ignore the link used by 'other browsers' */ .menu ul li a.hide, .menu ul li a:visited.hide { display:none; } /* set the background and foreground color of the main menu link on hover */ .menu ul li a:hover { color:#fff; background:#b3ab79; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li a:hover ul { display:block; position:absolute; top:32px; left:0; width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li a:hover ul li a { background:#faeec7; color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li a:hover ul li a:hover { background:#dfc184; color:#000; } </style> <![endif]--> </head> <body> <!--把下面代码加到<body>与</body>之间--> <div class="menu"> <ul> <li><a class="hide" href="../menu/index.html" _ewebeditor_ta_href="..%2Fmenu%2Findex.html">DEMOS</a> <!--[if lte IE 6]> <a href="../menu/index.html" _ewebeditor_ta_href="..%2Fmenu%2Findex.html">DEMOS <table><tr><td> <![endif]--> <ul> <li><a href="../menu/zero_dollars.html" _ewebeditor_ta_href="..%2Fmenu%2Fzero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> <li><a href="../menu/embed.html" _ewebeditor_ta_href="..%2Fmenu%2Fembed.html" title="Wrapping text around images">wrapping text</a></li> <li><a href="../menu/form.html" _ewebeditor_ta_href="..%2Fmenu%2Fform.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" _ewebeditor_ta_href="..%2Fmenu%2Fnodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/shadow_boxing.html" _ewebeditor_ta_href="..%2Fmenu%2Fshadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" _ewebeditor_ta_href="..%2Fmenu%2Fold_master.html" title="Image Map for detailed information">image map</a></li> <li><a href="../menu/bodies.html" _ewebeditor_ta_href="..%2Fmenu%2Fbodies.html" title="fun with background images">fun backgrounds</a></li> <li><a href="../menu/fade_scroll.html" _ewebeditor_ta_href="..%2Fmenu%2Ffade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" _ewebeditor_ta_href="..%2Fmenu%2Fem_images.html" title="em size images compared">em sized images</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="index.html" _ewebeditor_ta_href="index.html">MENUS</a> <!--[if lte IE 6]> <a href="index.html" _ewebeditor_ta_href="index.html">MENUS <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" _ewebeditor_ta_href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" _ewebeditor_ta_href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" _ewebeditor_ta_href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" _ewebeditor_ta_href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" _ewebeditor_ta_href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" _ewebeditor_ta_href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" _ewebeditor_ta_href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../layouts/index.html" _ewebeditor_ta_href="..%2Flayouts%2Findex.html">LAYOUTS</a> <!--[if lte IE 6]> <a href="../layouts/index.html" _ewebeditor_ta_href="..%2Flayouts%2Findex.html">LAYOUTS <table><tr><td> <![endif]--> <ul> <li><a href="../layouts/bodyfix.html" _ewebeditor_ta_href="..%2Flayouts%2Fbodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" _ewebeditor_ta_href="..%2Flayouts%2Fbody2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" _ewebeditor_ta_href="..%2Flayouts%2Fbody4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" _ewebeditor_ta_href="..%2Flayouts%2Fbody5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="../layouts/minimum.html" _ewebeditor_ta_href="..%2Flayouts%2Fminimum.html" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../boxes/index.html" _ewebeditor_ta_href="..%2Fboxes%2Findex.html">BOXES</a> <!--[if lte IE 6]> <a href="../boxes/index.html" _ewebeditor_ta_href="..%2Fboxes%2Findex.html">BOXES <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" _ewebeditor_ta_href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" _ewebeditor_ta_href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" _ewebeditor_ta_href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" _ewebeditor_ta_href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" _ewebeditor_ta_href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" _ewebeditor_ta_href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" _ewebeditor_ta_href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../mozilla/index.html" _ewebeditor_ta_href="..%2Fmozilla%2Findex.html">MOZILLA</a> <!--[if lte IE 6]> <a href="../mozilla/index.html" _ewebeditor_ta_href="..%2Fmozilla%2Findex.html">MOZILLA <table><tr><td> <![endif]--> <ul> <li><a href="../mozilla/dropdown.html" _ewebeditor_ta_href="..%2Fmozilla%2Fdropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" _ewebeditor_ta_href="..%2Fmozilla%2Fcascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" _ewebeditor_ta_href="..%2Fmozilla%2Fcontent.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" _ewebeditor_ta_href="..%2Fmozilla%2Fmoxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" _ewebeditor_ta_href="..%2Fmozilla%2Frainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" _ewebeditor_ta_href="..%2Fmozilla%2Fsnooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="../mozilla/target.html" _ewebeditor_ta_href="..%2Fmozilla%2Ftarget.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" _ewebeditor_ta_href="..%2Fmozilla%2Fsplittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" _ewebeditor_ta_href="..%2Fmozilla%2Fshadow_text.html" title="Shadow text">shadow text</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../ie/index.html" _ewebeditor_ta_href="..%2Fie%2Findex.html">EXPLORER</a> <!--[if lte IE 6]> <a href="../ie/index.html" _ewebeditor_ta_href="..%2Fie%2Findex.html">EXPLORER <table><tr><td> <![endif]--> <ul> <li><a href="../ie/exampleone.html" _ewebeditor_ta_href="..%2Fie%2Fexampleone.html" title="Example one">example one</a></li> <li><a href="../ie/weft.html" _ewebeditor_ta_href="..%2Fie%2Fweft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" _ewebeditor_ta_href="..%2Fie%2Fexampletwo.html" title="Vertical align">vertical align</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../opacity/index.html" _ewebeditor_ta_href="..%2Fopacity%2Findex.html">OPACITY</a> <!--[if lte IE 6]> <a href="../opacity/index.html" _ewebeditor_ta_href="..%2Fopacity%2Findex.html">OPACITY <table><tr><td> <![endif]--> <ul> <li><a href="../opacity/colours.html" _ewebeditor_ta_href="..%2Fopacity%2Fcolours.html" title="colour wheel">opaque colours</a></li> <li><a href="../opacity/picturemenu.html" _ewebeditor_ta_href="..%2Fopacity%2Fpicturemenu.html" title="a menu using opacity">opaque menu</a></li> <li><a href="../opacity/png.html" _ewebeditor_ta_href="..%2Fopacity%2Fpng.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" _ewebeditor_ta_href="..%2Fopacity%2Fpng2.html" title="partial opacity II">partial opacity II</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> <!-- clear the floats if required --> <div class="clear"> </div> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
一般情况复制的东西，尽量不要用editplus复制，容易运行错误。
教程首页
更多教程