[HTML] CSS + JS 多级下拉菜单

最新推荐文章于 2023-09-27 21:55:53 发布

VIP文章 ShanHaiyang

最新推荐文章于 2023-09-27 21:55:53 发布

阅读量7.7k

点赞数

本文链接：https://blog.csdn.net/shylx123/article/details/47863179

版权

多级下拉菜单

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication6.WebForm2" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>


    <script>
        //显示子菜单里的内容
        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>

    <style>
        body {
            margin: 0 auto;
            font-family:Arial,sans-serif;
        }

        /*将header固定在最上面，并设置高度和宽度*/
        #header {
            background-color: #0096d6;
            height: 50px;            
            position:fixed;
            width:100%;
            left:0px;
            top:0px;

        }

        /*设计nav的定位方式*/
        #nav {
            position: absolute;
        }

            /*去掉ul里的符号*/
            #nav > ul {
                list-style-type: none;
                
            }
                
                /*将子菜单里的ul的内容隐藏*/
                #nav > ul > li > ul {
                    display: none;
                    list-style-type: none;
                    padding:0px;
                  
                }

                /*设计子菜单里的字体大小和间距*/
                #nav > ul > li > ul>li {                    
                    font-size: 20px;
                    padding:5px 5px;
                }

                /*设置主主菜单li里的浮动方向，每个li的宽度，背景颜色，字体大小*/
                #nav > ul > li {
                    float: left;
                    width: 150px;
                    background-color: #0096d6;                    
                    font-size: 25px;
                    margin: 0px 5px;
                }

                /*去掉link里的设置*/
                #nav a,a:hover, a:visited
                {
                    text-decoration:none;
                    color:white;
                }

                /*鼠标放到子菜单上面，背景颜色会变*/
                #nav>ul>li>ul>li>a:

最低0.47元/天解锁文章

ShanHaiyang

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
[HTML] CSS + JS 多级下拉菜单

多级下拉菜单 //显示子菜单里的内容 function displaySubMenu(li) { var subMenu = li.getElementsByTagName("ul")[0]; subMenu.style.display = "block"; }
复制链接

扫一扫