css局部布局

<!DOCTYPE html>

<html lang="zh-cn">

    <head>

        <meta charset="utf-8" />

        <title>导航菜单</title>

        <style type="text/css">

            * {

                margin: 0px;

                padding: 0px;

            }

 

            ul {

                list-style: none;

                width: 1000px;

                margin: 150px auto 0px;

            }

 

            li {

                float: left;

                width: 100px;

                height: 35px;

                line-height: 35px;

                text-align: center;

                color: white;

                position: relative;

                background-color: rgb(79, 128, 109);

            }

 

            .item2 {

                display: none;

                position: absolute;

                left: 0px;

                top: 35px;

                height: 0px;

                width: 100px;

                background-color: blue;

            }

 

            a {

                color: gray;

                text-decoration: none;

            }

        </style>

    </head>

    <body>

        <ul>

            <li>

                <div class="item1">菜单一</div>

                <div class="item2">

                    <a href="">菜单一一</a><br />

                    <a href="">菜单一二</a><br />

                    <a href="">菜单一三</a><br />

                </div>

            </li>

            <li>菜单二</li>

            <li>菜单三</li>

            <li>菜单四</li>

            <li>菜单五</li>

            <li>菜单六</li>

            <li>菜单七</li>

            <li>菜单八</li>

            <li>菜单九</li>

            <li>菜单十</li>

        </ul>

        <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>

        <script type="text/javascript">

            $('li').hover(function(){

                $('.item2').css('display', 'block');

                $('.item2').animate({height : "110px"});

            }, function(){

                $('.item2').animate({height : "0px"}, function(){

                    $('.item2').css('display', 'none');

                });

            });

        </script>

    </body>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值