站长资源 网络编程

css+js下拉菜单

整理:jimmy2026/8/6浏览2次

简介css菜单演示产品介绍产品一产品一产品一产品一产品一产品一服务介绍服务二服务二服务二服务二服务二服务二服务二服务二服务二成功案例案例三案例案例三案例三案例三案例三案例三关于我们我们四我们四我们四我们四111 在线演

[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">  <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>  </head> <body>   <ul> <li>DEMOS  <ul> <li>zero dollars</li> <li>wrapping text</li> <li>styled form</li> <li>active focus</li> <li>shadow boxing</li> <li>image map</li> <li>fun backgrounds</li> <li>fade scrolling</li> <li>em sized images</li> </ul>  </li> <li>MENUS  <ul> <li>spies menu</li> <li>vertical menu</li> <li>enlarging list</li> <li>link images</li> <li>non-rectangular</li> <li>jigsaw links</li> <li>circular links</li> </ul>  </li> <li>LAYOUTS  <ul> <li>Fixed 1</li> <li>Fixed 2</li> <li>Fixed 3</li> <li>Fixed 4</li> <li>minimum width</li> </ul>  </li> <li>BOXES  <ul> <li>spies menu</li> <li>vertical menu</li> <li>enlarging list</li> <li>link images</li> <li>non-rectangular</li> <li>jigsaw links</li> <li>circular links</li> </ul>  </li> <li>MOZILLA  <ul> <li>drop down menu</li> <li>cascading menu</li> <li>content:</li> <li>mozzie box</li> <li>rainbow box</li> <li>snooker cue</li> <li>target practise</li> <li>two tone headings</li> <li>shadow text</li> </ul>  </li> <li>EXPLORER  <ul> <li>example one</li> <li>weft fonts</li> <li>vertical align</li> </ul>  </li> <li>OPACITY  <ul> <li>opaque colours</li> <li>opaque menu</li> <li>partial opacity</li> <li>partial opacity II</li> </ul>  </li> </ul>     </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
一般情况复制的东西，尽量不要用editplus复制，容易运行错误。

上一篇：javascript 贪吃蛇(详细注释版)

下一篇：jquery(1.3.2) 高亮选中图片边框

站长资源 网络编程

css+js下拉菜单

最新资源

一句话新闻

标签云