导航的制作,标题有菜单展开

css样式：

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .s {
            width: 100%;
            height: 70px;
            background-color: navy;
            position: relative;
        }

        .t {
            width: 300px;
            height: 70px;
            margin-left: 100px;
            line-height: 70px;
            text-align: center;
            color: white;
            font-size: 24px;
            position: relative;
            float: left;
        }

        .m {
            width: 120px;
            height: 70px;
            margin-left: 100px;
            line-height: 70px;
            text-align: center;
            color: white;
            font-size: 17px;
            position: relative;
            float: left;
        }

            .m:hover {
                color: lawngreen;
            }

        .d {
            color: white;
            background-color: gray;
            list-style-type: none;
            line-height: 40px;
            width: 120px;
            display: none;
        }

            .d li:hover {
                color: lawngreen;
            }
    </style>

html代码：

<body style="font-family: 微软雅黑;">
    <form id="form1" runat="server">
        <div class="s" id="main">
            <div class="t">井下束管监测系统</div>

            <div class="m">
                监测监控页
            <ul class="d">
                <li>香蕉</li>
                <li>苹果</li>
                <li>橘子</li>
            </ul>
            </div>





            <div class="m">
                用户管理
            <ul class="d">
                <li>长虹电视</li>
                <li>联想电脑</li>
                <li>苹果手机</li>
                <li>海尔冰箱</li>
            </ul>
            </div>





            <div class="m">
                数据查询
            <ul class="d">
                <li>可口可乐</li>
                <li>美年达</li>
            </ul>
            </div>





            <div class="m">
                系统设置
            <ul class="d">
                <li>篮球</li>
                <li>足球</li>
                <li>排球</li>
            </ul>
            </div>






            <div class="m">
                帮助
            <ul class="d">
                <li>轿车</li>
                <li>吉普车</li>
                <li>卡车</li>
                <li>自行车</li>
                <li>电动车</li>
            </ul>
            </div>
        </div>
    </form>
</body>
</html>

js代码：

<script>  

$('#main .m').hover(function () { $(this).children('ul').show(); }, function () { $(this).children('ul').hide(); });

</script>

 

posted @ 2017-09-26 15:01  游称  阅读(124)  评论(0)    收藏  举报