jquery 模块化（head）

头部导航栏（弹出功能菜单）

    <div id="head">
        <ul>
            <li><a href="javascript:;">logo</a></li>
            <li><a href="javascript:;">首页</a></li>
            <li>
                <a href="javascript:;" class="user">用户</a>
                <a href="javascript:;" class="exit">退出</a>
            </li>
        </ul>
    </div>

<script>
    //退出标签的显示与隐藏
    $(".user").hover(
        function () {
            $(".exit").slideDown();
        },
        function () {
            $(".exit").slideUp();
        }
    );
    //退出标签鼠标滑入时不隐藏
    $(".exit").hover(function () {
        $(this).stop().show()
    },
        function () {
            $(this).stop().slideUp()
        }
    )
</script>

<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style:none;
    }
    a{
        text-decoration: none;
    }

    #head{
        position:fixed;
        top:0;
        right:0;
        left:0;
        background: black;

    }
    #head li{
        float:left;
        line-height: 60px;
        padding-left: 10px;
    }
    #head a{
        color:white;
    }
    #head li:last-child{
        position:relative;
        float:right;
        padding-right:30px;
    }
    #head .exit{
        position:absolute;
        top:40px;
        left:5px;
        width:40px;
        line-height: 30px;
        text-align: center;
        background: blue;
        display: none;
    }

</style>