js+css简单导航栏特效

最新推荐文章于 2024-06-21 11:31:32 发布

naomi吖

最新推荐文章于 2024-06-21 11:31:32 发布

阅读量1k

点赞数

分类专栏： css js

本文链接：https://blog.csdn.net/odelia145/article/details/73550591

版权

css 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏


<script src="jquery-1.4.2.js"></script>


<style>
    *{ margin:0; padding:0; list-style:none}

    .nav{ width:100%; height:45px; background-color:#06F}

    .naver{ width:1200px; height:45px; margin:0 auto; position:relative}

    .ul{ position:relative}

    .naver li{ float:left; padding:0 2px; }

    .naver li a{ width:120px; height:45px; display:block; text-align:center; line-height:45px; color:#FFF}

    .box{ width:1200px; height:300px; background:#FC3; position:absolute; top:45px; left:0; display:none}

    .dis{ display:none}

    .bg{ width:120px; height:45px;background:#0CF; position:absolute; top:0; left:0}
</style>
<body>
   
    <div class="nav">
       <div class="naver">
              <div class="bg"></div>
           <ul>

               <li>
                   <a href="#">js特效</a>
                    <div class="box dis">
                       <a href="#">哈哈1</a>
                        <a href="#">哈哈1</a>
                        <a href="#">哈哈1</a>
                        <a href="#">哈哈1</a>
                    </div>

                </li>
                <li>
                   <a href="#">js特效</a>
                    <div class="box">
                       <a href="#">哈哈2</a>
                        <a href="#">哈哈2</a>
                        <a href="#">哈哈</a>
                        <a href="#">哈哈</a>
                    </div>

                </li>
                <li>
                   <a href="#">js特效</a>
                    <div class="box">
                       <a href="#">哈哈33</a>
                        <a href="#">哈哈333</a>
                        <a href="#">哈哈</a>
                        <a href="#">哈哈</a>
                    </div>
                    
                </li>
                <li>
                   <a href="#">js特效</a>
                    <div class="box">
                       <a href="#">哈哈4444444</a>
                        <a href="#">哈哈</a>
                        <a href="#">哈哈</a>
                        <a href="#">哈哈</a>
                    </div>
                    
                </li>
                <li>
                   <a href="#">js特效</a>
                    <div class="box">
                       <a href="#">哈哈55555</a>
                        <a href="#">哈哈</a>
                        <a href="#">哈哈</a>
                        <a href="#">哈哈</a>
                    </div>
                    
                </li>
                <li>
                   <a href="#">js特效</a>
                    <div class="box">
                       <a href="#">哈哈66666</a>
                        <a href="#">哈哈</a>
                        <a href="#">哈哈</a>
                        <a href="#">哈哈</a>
                    </div>
                    
                </li>
                
                
                
            </ul>
        </div>
    </div>

</body>
<script>
$(function(){

$(".naver li").hover(

function(){
$(this).children(".box").css("display","block");
},
function(){
$(this).children(".box").css("display","none");

}

);

});
</script>
</html>