HTML 菜单

wuchangjian2021-11-04 14:46:01编程学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .head{
            font-size: 30px;
            text-align: center;
            margin:20px auto;
        }
        ul{
            list-style: none;
        }
        li{
            display: inline-block;
            padding:0 50px;
        }
        .nav{
            width: 600px;
            height: 60px;
            margin:20px auto 0;
            background-color: #ccc;
            box-sizing:border-box;
            box-shadow: inset -1px -1px 3px 1px rgba(0,0,0,0.6);
        }
        .nav_list li{
            text-align: center;
            float: left;
            box-shadow: inset -1px -1px 3px 1px rgba(0,0,0,0.6);    
        }
        a{
            text-decoration: none;
            color: #6D00D9;
        }
        ul{
            display: inline-block;
            height:60px;
            line-height:60px;
            text-align: center;
            cursor: pointer;
            padding: 0px;
        }
        .active{
            background-color: #666;
            border: 1px solid #333;
        }
        .clearfix:after{
            content: "";
            clear: both;
            display: block;
        }
        .clearfix{
            zoom: 1;
        }
        .list{
            position: relative;
        }
        .nav_list{
            position: absolute;
            top:100%;
            left: 0;
            display: none;
        }
        .nav_list li{
            padding: 10px;
            line-height: 36px;
            height: 36px;
            width: 140px;
            text-align: center;
            background-color: #6eb;
        }
        .diyi{
            position: relative;
        }
        ol{
            position: absolute;
            top: 0;
            left: 100%;
            display: none;
        }
        .diyi ol li{
            width: 140px;
            height:36px;
            line-height:36px;
            text-align: center;
            background-color:#BFFFFF;
        }
        li:hover,ol li:hover{
            background-color: orange;
        }
        h4{}
    </style>
    <script>
        window.οnlοad=function(){
            var oLi=document.getElementsByTagName("li");
            var ol=document.getElementsByTagName("ol");
            for (var i = 0; i < oLi.length; i++) {
                oLi[i].οnmοuseοver=function(){
                    if (this.className=="list") {
                        var oUl=this.getElementsByTagName("ul")[0];
                        oUl.style.display="block";
                    }else if(this.className=="diyi"){
                        var ol=this.getElementsByTagName("ol")[0];
                        ol.style.display="block";
                    }
                }
                oLi[i].οnmοuseοut=function(){
                    if (this.className=="list") {
                        var oUl=this.getElementsByTagName("ul")[0];
                        var h4=this.getElementsByTagName("h4")[0];
                        oUl.style.display="none";
                    }else if(this.className=="diyi"){
                        var ol=this.getElementsByTagName("ol")[0];
                        ol.style.display="none";
                    }
                }
            }
        }
            
    </script>
</head>
<body>
    <div class="head">领哥在线</div>
    <div class="nav">
        <ul>
            <li class="list"><h4><a href="#">领哥金融</a></h4>
                <ul class="nav_list claerfix" id="nav_list">
                    <li class="diyi"><a href="#">投资</a>
                        <ol>
                            <li><a href="#">房产</a></li>
                            <li><a href="#">黄金</a></li>
                            <li><a href="#">水产品</a></li>
                        </ol>
                    </li>
                    <li class="diyi"><a href="#">股市</a>
                        <ol>
                            <li><a href="#">新闻</a></li>
                            <li><a href="#">昨日涨幅</a></li>
                            <li><a href="#">今日开盘价</a></li>
                        </ol>
                    </li>
                    <li  class="diyi"><a href="">市场</a>
                        <ol>
                            <li><a href="#">蔬菜行情</a></li>
                            <li><a href="#">猪肉价格</a></li>
                            <li><a href="#">蛋类</a></li>
                            <li><a href="#">月饼</a></li>
                        </ol>
                    </li>
                    <li  class="diyi"><a href="#">走势</a>
                        <ol>
                            <li><a href="#">今日走势</a></li>
                            <li><a href="#">昨日走势</a></li>
                            <li><a href="#">预计</a></li>
                        </ol>
                    </li>
                </ul>
            </li>
            <li class="list"><h4><a href="#">领哥教育</a></h4>
                <ul class="nav_list">
                    <li class="diyi"><a href="#">幼儿教育</a>
                        <ol>
                            <li><a href="#">儿歌</a></li>
                            <li><a href="#">拼音</a></li>
                            <li><a href="#">跳舞</a></li>
                        </ol>
                    </li>
                    <li class="diyi"><a href="#">小学教育</a>
                        <ol>
                            <li><a href="#">语文</a></li>
                            <li><a href="#">数学</a></li>
                            <li><a href="#">英语</a></li>
                        </ol>
                    </li>
                    <li  class="diyi"><a href="#">初中教育</a>
                        <ol>
                            <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>
                        </ol>
                    </li>
                    <li  class="diyi"><a href="#">高中教育</a>
                        <ol>
                            <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>
                        </ol>
                    </li>
                </ul>
            </li>
            <li class="list"><h4><a href="#">医疗保障</a></h4>
                <ul class="nav_list">
                    <li class="diyi"><a href="#">医保</a>
                        <ol>
                            <li><a href="#">医保说明</a></li>
                            <li><a href="#">办理地点</a></li>
                            <li><a href="#">医保种类</a></li>
                        </ol>
                    </li>
                    <li class="diyi"><a href="#">保险</a>
                        <ol>
                            <li><a href="#">老年保险</a></li>
                            <li><a href="#">出行险</a></li>
                            <li><a href="#">医疗保险</a></li>
                        </ol>
                    </li>
                    <li  class="diyi"><a href="#">大病报销</a>
                        <ol>
                            <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>
                        </ol>
                    </li>
                    <li  class="diyi"><a href="#">医生在线</a>
                        <ol>
                            <li><a href="#">科室专家</a></li>
                            <li><a href="#">主任医师</a></li>
                            <li><a href="#">主治医师</a></li>
                            <li><a href="#">普通医生</a></li>
                        </ol>
                    </li>
                </ul>
            </li>
                
        </ul>    
    </div>
</body>
</html>

相关文章

高质量的C/C++编程(2)----程序员必看系列

目录 前言 第二章 2.1 空行 2.2  代码行 2.3  代码行内的空格...

俄防长绍伊古:没有必要在乌克兰使用核武器

2022-08-16 16:27:49 当地时间16日,俄罗斯国防部长...

彩虹夫妇注资100万成立新公司

彩虹夫妇注资100万成立新公司

2022-08-11 15:57:47 企查查APP显示,近日,重庆文...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。