1 <html>
2 <head>
3 <title>一款选项卡式的导航菜单_网页代码站(www.webdm.cn)</title>
4 <style type="text/css">
5 <!--
6 #navlist
7 {
8 border-bottom: 1px solid #ccc;
9 margin: 0;
10 padding-bottom: 19px;
11 padding-left: 10px;
12 }
13
14 #navlist ul, #navlist li
15 {
16 display: inline;
17 list-style-type: none;
18 margin: 0;
19 padding: 0;
20 }
21
22 #navlist a:link, #navlist a:visited
23 {
24 background: #E8EBF0;
25 border: 1px solid #ccc;
26 color: #666;
27 float: left;
28 font-size: small;
29 font-weight: normal;
30 line-height: 14px;
31 margin-right: 8px;
32 padding: 2px 10px 2px 10px;
33 text-decoration: none;
34 }
35
36 #navlist a:link#current, #navlist a:visited#current
37 {
38 background: #fff;
39 border-bottom: 1px solid #fff;
40 color: #000;
41 }
42
43 #navlist a:hover { color: #f00; }
44
45 body.section-1 #navlist li#nav-1 a,
46 body.section-2 #navlist li#nav-2 a,
47 body.section-3 #navlist li#nav-3 a,
48 body.section-4 #navlist li#nav-4 a
49 {
50 background: #fff;
51 border-bottom: 1px solid #fff;
52 color: #000;
53 }
54
55 #navlist #subnav-1,
56 #navlist #subnav-2,
57 #navlist #subnav-3,
58 #navlist #subnav-4
59 {
60 display: none;
61 width: 90%;
62 }
63
64 body.section-1 #navlist ul#subnav-1,
65 body.section-2 #navlist ul#subnav-2,
66 body.section-3 #navlist ul#subnav-3,
67 body.section-4 #navlist ul#subnav-4
68 {
69 display: inline;
70 left: 10px;
71 position: absolute;
72 top: 95px;
73 }
74
75 body.section-1 #navlist ul#subnav-1 a,
76 body.section-2 #navlist ul#subnav-2 a,
77 body.section-3 #navlist ul#subnav-3 a,
78 body.section-4 #navlist ul#subnav-4 a
79 {
80 background: #fff;
81 border: none;
82 border-left: 1px solid #ccc;
83 color: #999;
84 font-size: smaller;
85 font-weight: bold;
86 line-height: 10px;
87 margin-right: 4px;
88 padding: 2px 10px 2px 10px;
89 text-decoration: none;
90 }
91
92 #navlist ul a:hover { color: #f00 !important; }
93 #contents
94 {
95 background: #fff;
96 border: 1px solid #ccc;
97 border-top: none;
98 clear: both;
99 margin: 0px;
100 padding: 15px;
101 }
102 -->
103 </style>
104 </head>
105
106 <body>
107 <div id="navcontainer">
108 <ul id="navlist">
109 <li id="active"><a href="#" id="current">ASP</a></li>
110 <li><a href="http://www.webdm.cn">PHP</a></li>
111 <li><a href="#">AJAX</a></li>
112 <li><a href="http://www.webdm.cn">JSP</a></li>
113 <li><a href="http://www.webdm.cn">FIVE</a></li>
114 </ul>
115 </div>
116 </body>
117 </html>
118 <br>
119 <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
文章来自：http://www.webdm.cn/webcode/c7c304ff-2931-43a6-be24-ee7ea788f2fa.html