用li,ul制作的菜单,类似于博客园主要面中的竖型菜单,但样式和它的不一样。可以随意修改。代码如下:
<script type="text/javascript" src="csjs/jquery-1.3.2.min.js"> </script> <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; width: 80px; } #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 { position: relative; 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: 150px; position: absolute; } #nav li ul li { float: left; width: 150px; background: #ccc; margin-left:1px; margin-bottom: 1px; } #nav li ul a { display: block; width: 150px; width: 150px; 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: 80px; top: 0px; } #content { clear: left; } --> </style> <script type=text/javascript> $(function(){ $.each($("#nav li"), function(index, domEle){ $(domEle).bind("mouseover", function(){ $(domEle).addClass("sfhover"); }); $(domEle).bind("mousedown", function(){ $(domEle).addClass("sfhover"); }); $(domEle).bind("mouseup", function(){ $(domEle).addClass("sfhover"); }); $(domEle).bind("mouseout", function(){ $(domEle).removeClass("sfhover"); }); }); }); </script> </head> <ul id="nav"> <li> <a href="#">.NET技术</a> <ul> <li> <a href="#">.NET新手区</a> </li> <li> <a href="#">ASP.NET</a> </li> <li> <a href="#">C#</a> </li> <li> <a href="#">WinForm</a> </li> <li> <a href="#">Silverlight</a> </li> <li> <a href="#">WCF</a> </li> <li> <a href="#">CLR</a> </li> <li> <a href="#">WPF</a> </li> <li> <a href="#">WCF</a> </li> <li> <a href="#">WF</a> </li> <li> <a href="#">XAN</a> </li> </ul> </li> <li> <a href="#">编程语言</a> <ul> <li> <a href="#">JAVA</a> </li> <li> <a href="#">C++</a> </li> <li> <a href="#">PHP</a> </li> <li> <a href="#">Ruby</a> </li> <li> <a href="#">Python</a> </li> <li> <a href="#">Flex</a> </li> </ul> </li> <li> <a href="#">软件设计</a> <ul> <li> <a href="#">建构设计</a> </li> <li> <a href="#">设计模式</a> </li> <li> <a href="#">面向对象</a> </li> <li> <a href="#">系统设计</a> </li> </ul> </li> <li> <a href="#">WEB前端</a> <ul> <li> <a href="#">Javascript</a> </li> <li> <a href="#">JQuery</a> </li> <li> <a href="#">Extjs</a> </li> <li> <a href="#">Dojo</a> </li> <li> <a href="#">Dwr</a> </li> <li> <a href="#">Zk</a> </li> <li> <a href="#">Html/Css</a> </li> <li> <a href="#">Xml</a> </li> </ul> </li> <li> <a href="#">数据库技术</a> <ul> <li> <a href="#">数据库原理</a> </li> <li> <a href="#">Oracle</a> </li> <li> <a href="#">MySQL</a> </li> <li> <a href="#">DB2</a> </li> <li> <a href="#">MSSQL 2000</a> </li> <li> <a href="#">MSSQL 2005</a> </li> <li> <a href="#">H2</a> </li> <li> <a href="#">SQlite</a> </li> </ul> </li> <li> <a href="#">操作系统</a> <ul> <li> <a href="#">OS原理技术</a> </li> <li> <a href="#">Win XP</a> </li> <li> <a href="#">Win 2000</a> </li> <li> <a href="#">Win 2003</a> </li> <li> <a href="#">Win 7</a> </li> <li> <a href="#">Win Vista</a> </li> </ul> </li> </ul> </body>
测试前请导入jquery文件。