js+css簡單導航欄特效
阿新 • • 發佈：2018-11-16
<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>