高分求动态导航栏的思路与代码

各位CSDN网友，元旦快乐！特效就是上图的导航栏，弄了个上午还是弄不出，请各位高手指点迷津！本人思路是在“网站首页”的那一行用table，然后在TD里面的onmousemove事件写一个动态生成层的位置和内容，但是不知道从何写起，本人菜鸟。各位高手帮帮忙！

解决方案 »

  1.   

    http://www.cool80.com/Code/2011-1-2/jQuery-ErJiGuDongXiaLaCaiChanDaiMa.html
    下载一个改下就可以了
      

  2.   


    <!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>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>二级下拉菜单</title>
        <style type="text/css">
            body{font-size:12px;} 
            #nav{line-height:24px;list-style-type:none;background:#666;} 
            #nav a{display:block;width:80px;text-align:center;}
            #nav a:hover{color:#FFF;text-decoration:none;font-weight:700;}
            #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;padding:0;}
            #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:hover{color:#F3F3F3;text-decoration:none;font-weight:400;background:#C00;}
            #content{clear:left;}
            #nav a:link,#nav a:visited,#nav li ul a:link,#nav li ul a:visited{color:#666;text-decoration:none;}
            #nav li:hover ul,#nav li.sfhover ul{left:auto;}
        </style>    <script type="text/javascript">
            function menuFix() {
                var sfEls = document.getElementById("nav").getElementsByTagName("li");
                for (var i = 0; i < sfEls.length; i++) {
                    sfEls[i].onmouseover = function() {
                        this.className += (this.className.length > 0 ? " " : "") + "sfhover";
                    }
                    sfEls[i].onMouseDown = function() {
                        this.className += (this.className.length > 0 ? " " : "") + "sfhover";
                    }
                    sfEls[i].onMouseUp = function() {
                        this.className += (this.className.length > 0 ? " " : "") + "sfhover";
                    }
                    sfEls[i].onmouseout = function() {
                        this.className = this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
                    }
                }
            }
            window.onload = menuFix;
        </script>
    </head>
    <body>
        <ul id="nav">
            <li><a href="#">JAVA</a>
                <ul>
                    <li><a href="#">源码</a></li>
                    <li><a href="#">实例</a></li>
                </ul>
            </li>
            <li><a href="#">ASP</a>
                <ul>
                    <li><a href="#">社区</a></li>
                    <li><a href="#">AJAX</a></li>
                    <li><a href="#">新闻</a></li>
                </ul>
            </li>
            <li><a href="#">PHP</a>
                <ul>
                    <li><a href="#">留言</a></li>
                    <li><a href="#">AJAX</a></li>
                </ul>
            </li>
            <li><a href="#/">联系我们</a>
                <ul>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </li>
        </ul>
    </body>
    </html>
      

  3.   

    纯CSS<style type="text/css">
    body{width:500px;margin:0 auto;}
    * {margin:0;padding:0;font-size:12px;}
    .menu li {float:left;list-style:none;position:relative;}
    .menu a {display:block;height:32px;width:100px;line-height:32px;background:#a9ea00;color:red;text-decoration:none;text-align:center;}
    .menu a:hover {background:#5C5C5C;color:#fff;}
    .menu ul ul {visibility:hidden;position:absolute;left:0px;top:32px;}
    .menu ul li:hover ul{visibility:visible;}
    </style>
    <div class="menu">
    <ul>
    <li>
    <a href="#">1</a>
    <ul>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    </ul>
    </li>
    <li>
    <a href="#">2</a>
    <ul>
    <li><a href="#">21</a></li>
    <li><a href="#">22</a></li>
    </ul>
    </li>
    <li>
    <a href="#">3</a>
    <ul>
    <li><a href="#">31</a></li>
    <li><a href="#">32</a></li>
    </ul>
    </li>
    <li>
    <a href="#">4</a>
    <ul>
    <li><a href="#">41</a></li>
    <li><a href="#">41</a></li>
    </ul>
    </li>
    </ul>