个性下拉菜单效果

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DropDownMenu.aspx.cs" Inherits="DropDownMenu" %> <!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 id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> </title>
 
    <script src="Script/jquery-1.2.6.min.js" type="text/javascript"></script>
 
 
   <script type="text/javascript">
       (function($) {
           $.fn.dropDownMenu = function(options) {
               var opts = $.extend({}, $.fn.dropDownMenu.defaults, options);
               return this.each(function() {
                   var menu = $(this).addClass('dropDownMenu');
                   var mainMenu = menu.find('> li').addClass('mainMenu');
                   var subMenus = menu.find('ul').addClass('subMenu').hide();                   if (opts.layout == 'h') {
                       menu.width(mainMenu.width() * mainMenu.size());
                   } else {
                       menu.width(mainMenu.width());
                   }                   menu.find('a').hover(function() {
                       var a = $(this);
                       var li = a.parent();
                       var ul = a.next();                       if (li.hasClass('mainMenu')) {
                           mainMenu.find('> .subMenu').stop(true, true).hide();
                           if (opts.layout == 'h') {
                               ul.animate({ 'height': 'toggle' }, 'slow');
                           } else {
                               ul.css('left', a.width()).css('top', 0)
                            .animate({ 'width': 'toggle' }, 'slow');
                           }
                       } else {
                           a.parents('.subMenu').show();
                           ul.css('left', a.width()).css('top', 0)
                        .animate({ 'width': 'toggle' }, 'slow');
                       }
                   }, function() {
                       var a = $(this);
                       var ul = a.next();                       if (ul.size() == 0) {
                           a.parents('.subMenu').hide();
                       } else {
                           ul.hide();
                       }
                   });
               });
           };           $.fn.dropDownMenu.defaults = {
               layout: 'h' //h:horizontal, v:vertical  
           };
       })(jQuery);       $(function() {
           $('#dropDownMenu').dropDownMenu();
       });  
</script>  
 
<style type="text/css">  
.dropDownMenu,  
.dropDownMenu ul {  
    margin: 0;  
    padding: 0;  
}  
  
.dropDownMenu li {  
    position: relative;  
    float: left;  
    display: block;  
    list-style: none;  
}  
  
.dropDownMenu ul {  
    position: absolute;  
}  
  
.dropDownMenu a {  
    display: block;  
    text-decoration: none;  
}  
  
.dropDownMenu .mainMenu {  
    width: 100px;  
    height: 56px;  
    background-color: #000;  
}  
  
.dropDownMenu .mainMenu a {  
    height: 56px;  
    width: 100px;  
    font: bold 16px/56px "黑体";  
    color: #fff;  
    text-align: center;  
}  
  
.dropDownMenu .subMenu li {  
    width: 100px;  
    height: 31px;  
    background-color: #3d0d0c;  
}  
  
.dropDownMenu .subMenu li a {  
    width: 100px;  
    height: 30px;  
    font: normal 12px/30px "宋体";  
    color: #fff;  
    text-align: center;  
    border-bottom: 1px solid #190505;  
}  
  
.dropDownMenu .subMenu li a:hover {  
    background-color: #260707;  
}  
</style>  
</head>  
<body>  
<form id="myForm" runat="server">
  <ul id="dropDownMenu">  
    <li><a href="#">首页</a></li>  
    <li>  
        <a href="#">关于翘华</a>  
        <ul>  
            <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>  
                    <li><a href="#">管理团队</a></li>  
                    <li><a href="#">分支机构</a></li>  
                </ul>  
            </li>  
            <li><a href="#">总裁专栏</a></li>  
            <li><a href="#">翘华文化</a></li>  
            <li><a href="#">媒体报道</a></li>  
            <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="#">翘华研究</a>  
        <ul>  
            <li><a href="#">研究周报</a></li>  
            <li><a href="#">投资策略</a></li>  
            <li><a href="#">固定收益信托</a></li>  
            <li><a href="#">阳光私募</a></li>  
            <li><a href="#">PE基金</a></li>  
            <li><a href="#">海外投资</a></li>  
            <li><a href="#">专题研究</a></li>  
            <li><a href="#">资产配置</a></li>  
        </ul>  
    </li>  
    <li>  
        <a href="#">产品与服务</a>  
        <ul>  
            <li><a href="#">固定收益信托</a></li>  
            <li><a href="#">阳光私募</a></li>  
            <li><a href="#">PE基金</a></li>  
            <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="#">理财学堂</a>  
        <ul>  
            <li><a href="#">信托学堂</a></li>  
            <li><a href="#">阳光私募学堂</a></li>  
            <li><a href="#">PE基金学堂</a></li>  
            <li><a href="#">海外投资学堂</a></li>  
            <li><a href="#">理财小知识</a></li>  
            <li><a href="#">政策法规</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>  
            <li><a href="#">人事行政职位</a></li>  
            <li><a href="#">自我推荐</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>  
            <li><a href="#">登录</a></li>  
            <li><a href="#">我的帐户</a></li>  
        </ul>  
    </li>  
  </ul>  
 
  </form>
</body>  
</html>