几种纯css布局的导航栏

1.垂直导航栏

页面效果

<ul class="nav"><li><a href="home.htm">Home</a></li><li><a href="about.htm">About</a></li><li><a href="services.htm">Services</a></li><li><a href="work.htm">Our Work</a></li><li><a href="news.htm">News</a></li><li><a href="contact.htm">Contact</a></li>
</ul>

html代码

ul.nav {margin: 0;padding: 0;list-style-type: none;width: 8em;background-color: #8BD400;border: 1px solid #486B02;}ul.nav a {display: block;color: #2B3F00;text-decoration: none;border-top: 1px solid #E4FFD3;border-bottom: 1px solid #486B02;background: url(arrow.gif) no-repeat 5% 50%;padding: 0.3em 2em;}ul.nav .last a {border-bottom: 0;}ul.nav a:hover,ul.nav a:focus,ul.nav .selected a {color: #E4FFD3;background-color: #6DA203;}

css样式

2.水平导航栏

页面效果

<ul class="nav-bar"><li><a href="home.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="news.html">News</a></li><li><a href="products.html">Products</a></li><li><a href="services.html">Services</a></li><li><a href="clients.html">Clients</a></li><li><a href="case-studies.html">Case Studies</a></li></ul>

水平导航html

 ul.nav-bar{margin:0;padding:0;list-style: none;width:70em;overflow: hidden;background: #FAA819 url(mainNavBg.gif) repeat-x;}ul.nav-bar li{float: left;}ul.nav-bar a{display: block;padding:0 3em;line-height:2.1em;text-decoration: none;color: #fff;background: url("divider.gif") repeat-y left top;}ul.nav-bar.first a{background-image: none;}ul.nav-bar li:frist-child a{background: none;}ul.nav-bar a:hover,ul.nav-bar a:focus{color: #333;}

水平导航栏样式

3.简化的滑动门标签页导航

页面效果

 <ul class="nav-4"><li><a href="home.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="news.html">News</a></li><li><a href="products.html">Products</a></li><li><a href="services.html">Services</a></li><li><a href="clients.html">Clients</a></li><li><a href="case-studies.html">Case Studies</a></li></ul>

html

ul.nav-4{margin:0;padding:0;list-style: none;width:72em;overflow: hidden;}ul.nav-4 li {float: left;background: url(tab-right.gif) no-repeat right top;}ul.nav-4 li a {display: block;padding:0 2em;line-height:2.5em;background: url("tab-left.gif") no-repeat left top;text-decoration: none;float: left;}ul.nav-4 a:hover,ul.nav-4 a:focus{color: #333;}

css

4.简化的下拉菜单导航

页面效果

<ul class="nav-5"><li><a href="/home/">Home</a></li><li><a href="/products/">Products</a><ul><li><a href="/products/silverback">Silverback</a></li><li><a href="/products/fontdeck">Font Deck</a></li></ul></li><li><a href="/services/">Services</a><ul><li><a href="/services/design/">Design</a></li><li><a href="/services/development/">Development</a></li><li><a href="/services/consultancy/">Consultancy</a></li></ul></li><li><a href="/content/">Content Us</a></li></ul>

html

 1 ul.nav-5,ul.nav-5 ul{
 2             margin:0;
 3             padding:0;
 4             list-style-type: none;
 5             float: left;
 6             border:1px solid #486B02;
 7             background-color: #8bd400;
 8         }
 9         ul.nav-5 li{
10             float: left;
11             width:8em;
12             background-color: #8bd400;
13         }
14         ul.nav-5 li ul{
15             width:8em;
16             position: absolute;
17             left:-999em;
18         }
19         .nav-5 li:hover ul{
20             left:auto;
21         }
22         ul.nav-5 a{
23             display: block;
24             color: #2B3F00;
25             text-decoration: none;
26             padding:0.3em 1em;
27             border-right:1px solid #486B02;
28             border-left:1px solid #E4FFD3;
29         }
30         ul.nav-5 li li a{
31             border-top:1px solid #E4FFD3;
32             border-bottom:1px solid #486B02;
33             border-left:0;
34             border-right:0;
35         }
36         ul.nav-5 li:list-child a{
37             border-right: 0;
38             border-bottom:0;
39         }
40         ul a:hover,
41         ul a:focus{
42             color: #E4FFD3;
43             background-color: #6DA203;
44         }