<!DOCTYPE html>
<html>
<head>
<title>横排NAV效果</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="bg">
<img class="bg" id="bg_01" src="image/02.jpg">
<img class="bg" id="bg_02" src="image/03.jpg">
<img class="bg" id="bg_03" src="image/06.jpg">
<!-- <div class="bg" id="bg_01">
<div class="bg" id="bg_02">
<div class="bg" id="bg_03"> -->
</div>
<div id="header" class="container">
<div id="header_logo" ></div>
<div id="header_nav">
<ul id="header_menu_list">
<li class="header_menu_list header_menu_list_checked header_menu_list_fi"><a href="">首页</a></li>
<li class="header_menu_list"><span></span><a href="">音乐</a></li>
<li class="header_menu_list"><span></span><a href="">图片</a></li>
<li class="header_menu_list"><span></span><a href="">文章</a></li>
<li class="header_menu_list"><span></span><a href="">影片</a></li>
<li class="header_menu_list"><span></span><a href="">关于</a></li>
<div class="clear"></div>
</ul>
<div id="header_menu_details">
<div id="header_menu_details_box">
<div id="header_menu_details_mask">
<div class="header_detail_container">
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="clear"></div>
</div>
<div class="header_detail_container">
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="clear"></div>
</div>
<div class="header_detail_container">
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="clear"></div>
</div>
<div class="header_detail_container">
<div class="header_detail_box">
<div class="header_detail_img">
<div class="header_detail_imgCover"></div>
</div>
<p class="header_detail_title"><img src="image/nav_menu_arrow.png" alt="">示例文字</p>
</div>
<div class="