javaScript制作下拉表格

来源：互联网发布：巨人网络征途编辑：程序博客网时间：2024/05/01 04:20

制作网页菜单时，我想把鼠标移过来，出现一下拉表格，在表格内选一个超链接，如何实现

JSP实现的，如果想改变网格布局用或者颜色什么的用css自己慢慢调吧。
<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="#" class="STYLE1">栏目1</a>
            <ul>
                <li><a href="#">栏目1->菜单1</a>|<a href="#">栏目1->菜单2</a>
                <a href="#">栏目1->菜单3</a>
                <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>