7、网页制作Dreamweaver（悬浮动态分层导航）

1 <script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

 1 <div id="apDiv1" ><img src="img/logo.bmp" />
 2   <nav id="menu">
 3   <div class="daohang" style="background-image:url(img/bg.png)">
 4       <a href="index.html"><div style="background-image:url(img/menu-hover.png); color:#fff">首页</div></a>
 5       <a href="about us.html" target="_blank"><div>
 6       关于我们</div></a>      
 7       
 8       <a href="services.html" target="_blank"><div>咖啡文化</div></a>
 9       
10       <a href="price list.html" target="_blank"><div>价格清单</div></a>
11        
12       <a href="contact.html" target="_blank"><div>联系我们</div></a>
13       
14   </div>
15   </nav>
16   <div style="color:#fff;line-height:35px; background-image:url(img/menu-hover.png); border:solid medium #965D28; margin-top:3px;" onclick="menuvisible()">
17   <input style="color:#fff; border:none; width:100%; background-image:url(img/menu-hover.png); font-family:‘黑体‘; font-size:16px; height:100%; line-height:35px;"type="button" value="<--MENU-->" /></div>
18   <div style="background-image:url(img/bg.png)"><a href="#top"style="text-decoration:none; color:#965D28;line-height:30px;">TOP</a></div>
19 </div>

 1 /*————导航—————*/
 2 #apDiv1 {
 3     position:fixed; 4     left: auto;
 5     top: auto;
 6     bottom:auto;
 7     width: 237px;
 8     height:auto;
 9     z-index: 2;
10     margin-top:-8px;
11     margin-left:40px;
12     text-align:center;
13     /*border:solid #965D28;*/
14     font-size:16px;
15     font-family:"黑体";
16     color:#965D28;
17     background-image:url(../img/bg.png);
18     }
19 #menu{
20     display:none;
21 }
22 .daohang div{
23     height: 30px;
24     z-index: 2;
25     margin:0 auto;
26     text-align:center;
27     padding-top:5px;
28     overflow:hidden;
29     padding-top:10px;
30     color:965D28;
31 }
32 .daohang div:hover{
33     height:30px;
34     z-index:2;
35     margin:0 auto;
36     background-image:url(../img/menu-hover.png);
37     text-align:center;
38     overflow:visible;
39     color:#fff;
40 }
41 
42 .daohang li{
43     margin-left:237px;
44     list-style-type:none;
45     background-color:#D3A23A;
46     width:160px;
47     line-height:30px;
48     color:#422B1D;
49     position:relative;
50     top:-40px;
51     background-image:url(../img/bg.jpg);
52     border:solid thin;
53     border-color:#965D28;
54     z-index:1;
55     }
56 .daohang li:hover{
57     margin-left:237px;
58     list-style-type:none;
59     background-color:#D3A23A;
60     width:160px;
61     line-height:50px;
62     color:#fff;
63     position:relative;
64     top:-40px;
65     border:solid thin;
66     border-color:#965D28;
67     background-image:url(../img/bg.png);
68     z-index:1;
69     }
70 .daohang a:link,a:visited{
71     text-decoration:none;
72     color:#965D28;
73 }
74 .daohang a:hover{
75     text-decoration:none;
76     color:#fff;
77 }

1 <script>
2 　　function menuvisible() {
3 　　$("nav").toggle();/*开关*/
4 　　}    
5 </script>