自制菜单

请问怎么弄成这样的菜单啊？
<img src="http://p.blog.csdn.net/images/p_blog_csdn_net/lude8880/EntryImages/20090714/viewmenu.JPG">

解决方案 »

  1.   

    http://download.csdn.net/source/1420830
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JavaScript下拉菜单</title>
        <style type="text/css">
            * {
                padding:0; 
                margin:0;
            }
            body {
                font-family:verdana, sans-serif; 
                font-size:small;
            }
            #navigation, #navigation li ul {
                list-style-type:none;
            }
            #navigation {
                margin:20px;
            }
            #navigation li {
                float:left;
                text-align:center;
                position:relative;
            }
            #navigation li a:link, #navigation li a:visited {
                display:block; 
                text-decoration:none; 
                color:#000; 
                width:120px; 
                height:40px; 
                line-height:40px; 
                border:1px solid #fff; 
                border-width:1px 1px 0 0; 
                background:#c5dbf2; 
                padding-left:10px; 
            }
            #navigation li a:hover {
                color:#fff;
                background:#2687eb;
            }
            #navigation li ul li a:hover {
                color:#fff;
                background:#6b839c; 
            }
            #navigation li ul {
                display:none;
                position:absolute; 
                top:40px;
                left:0;
                margin-top:1px;
                width:120px;
            }
            #navigation li ul li ul {
                display:none;
                position:absolute; 
                top:0px;
                left:130px; 
                margin-top:0;
                margin-left:1px;
                width:120px;
            }
        </style>
        <script type="text/javascript">
            function displaySubMenu(li) {
                var subMenu = li.getElementsByTagName("ul")[0];
                subMenu.style.display = "block";
            }
            function hideSubMenu(li) {
                var subMenu = li.getElementsByTagName("ul")[0];
                subMenu.style.display = "none";
            }
        </script>
    </head>
    <body>
        <ul id="navigation">
            <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
                <a href="#">栏目1</a>    
                <ul>
                    <li><a href="#">栏目1->菜单1</a></li>
                    <li><a href="#">栏目1->菜单2</a></li>
                    <li><a href="#">栏目1->菜单3</a></li>
                    <li><a href="#">栏目1->菜单4</a></li>
                </ul>
            </li>
            <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
                <a href="#">栏目2</a>    
                <ul>
                    <li><a href="#">栏目2->菜单1</a></li>
                    <li><a href="#">栏目2->菜单2</a></li>
                    <li><a href="#">栏目2->菜单3</a></li>
                    <li><a href="#">栏目2->菜单4</a></li>
                    <li><a href="#">栏目2->菜单5</a></li>
                </ul>
            </li>
            <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
                <a href="#">栏目3</a>    
                <ul>
                    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
                        <a href="#">栏目3->菜单1</a>
                        <ul>
                            <li><a href="#">菜单1->子菜单1</a></li>
                            <li><a href="#">菜单1->子菜单2</a></li>
                            <li><a href="#">菜单1->子菜单3</a></li>
                            <li><a href="#">菜单1->子菜单4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">栏目3->菜单2</a></li>
                    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
                        <a href="#">栏目3->菜单3</a>
                        <ul>
                            <li><a href="#">菜单3->子菜单1</a></li>
                            <li><a href="#">菜单3->子菜单2</a></li>
                            <li><a href="#">菜单3->子菜单3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
    </html>