001<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">002<html xmlns="http://www.w3.org/1999/xhtml">003<head>004<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>005<title>无标题文档</title>006<style type="text/css">007 .nav{float:left;position:relative;width:253px;}008 h2,ul,p{margin:0;padding:0;text-align:center;}009 h2{font-weight:400;font-size:100%;background:#9B203F;border-bottom:solid 1px #500C1B;}010 h2 a{list-style-type:none;height:37px;color:#fff;line-height:37px;}011 ul{font-size:0;background:#9B203F;padding:0 0 40px;}012 ul li{list-style-type:none;padding-bottom:5px;color:#fff;font-size:14px;padding:0 20px;height:34px;line-height:34px;position:relative;}013 ul li a{border-bottom:dashed 1px#E67A92;display:block;width:196px;margin:0 auto;}014 ul li.hover_bg{background:#C30431;}015 .Secon_Dary{width:253px;background:#C30431;position:absolute;right:-253px;top:0;padding-bottom:30px;display:none;}016 .Secon_Dary p{padding:0 20px;}017 .Secon_Dary a{display:block;height:34px;line-height:34px;color:#fff;border-bottom:dashed 1px #E67A92;}018 a{cursor:pointer;}019</style>020<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"type="text/javascript"></script>021<script type="text/javascript">022 $(document).ready(function(){023 $(".nav ul li").each(function(){024 $(this).hover(function(){025 $(this).addClass("hover_bg");026 $(this).find(".Secon_Dary").show();027 },function(){028 $(this).removeClass("hover_bg"); 029 $(this).find(".Secon_Dary").hide();030 })031 })032 })033</script>034</head>035 036<body>037 <div class="nav">038 <h2><a>ALL CATEGORIES</a></h2>039 <ul>040 <li>041 <a>Posojg</a>042 <div class="Secon_Dary">043 <p>044 <a>AAAAAAAAAAA</a>045 <a>BBBBBB</a>046 <a>AAAAAAAAAAA</a>047 <a>BBBBBB</a>048 <a>AAAAAAAAAAA</a>049 <a>BBBBBB</a>050 <a>AAAAAAAAAAA</a>051 <a>BBBBBB</a>052 </p>053 </div>054 </li>055 <li>056 <a>FOwojg</a>057 <div class="Secon_Dary">058 <p>059 <a>AAAAAAAAAAA</a>060 <a>BBBBBB</a>061 <a>AAAAAAAAAAA</a>062 <a>BBBBBB</a>063 <a>AAAAAAAAAAA</a>064 <a>BBBBBB</a>065 <a>AAAAAAAAAAA</a>066 <a>BBBBBB</a>067 </p>068 </div> 069 </li>070 <li>071 <a>Sowgjed</a>072 <div class="Secon_Dary">073 <p>074 <a>AAAAAAAAAAA</a>075 <a>BBBBBB</a>076 <a>AAAAAAAAAAA</a>077 <a>BBBBBB</a>078 <a>AAAAAAAAAAA</a>079 <a>BBBBBB</a>080 <a>AAAAAAAAAAA</a>081 <a>BBBBBB</a>082 </p>083 </div>084 </li>085 <li>086 <a>Gowjgeo</a>087 <div class="Secon_Dary">088 <p>089 <a>AAAAAAAAAAA</a>090 <a>BBBBBB</a>091 <a>AAAAAAAAAAA</a>092 <a>BBBBBB</a>093 <a>AAAAAAAAAAA</a>094 <a>BBBBBB</a>095 <a>AAAAAAAAAAA</a>096 <a>BBBBBB</a>097 </p>098 </div>099 </li>100 </ul>101 </div><!--nav-->102</body>103</html>
