您的位置：首页 > 其它

简单的二级联动菜单

2012-12-27 08:14 537 查看 
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>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航