蓝色、绿色、红色、紫色四种颜色的水平CSS导航

演示效果截图

用到的图片

CSS代码

/* ---------------------- Blueslate nav ---------------------- */
.blue #slatenav{position:relative;display:block;height:42px;
font-size:11px;font-weight:bold;background:transparent
 url(/uploadfile/image/four-color-nav/blueslate_background.gif)
 repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;
 text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;
text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{
color:#fff;background:transparent
 url(/uploadfile/image/four-color-nav/blueslate_backgroundOVER.gif)
  no-repeat top center;}
/* ---------------------- END Blueslate nav ---------------------- */
/* ---------------------- Greenslate nav ---------------------- */
.green #slatenav{position:relative;display:block;height:42px;
font-size:11px;font-weight:bold;background:transparent
 url(/uploadfile/image/four-color-nav/greenslate_background.gif)
 repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;
 text-transform:uppercase;}
.green #slatenav ul{margin:0px;padding:0;list-style-type:none;auto;}
.green #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.green #slatenav ul li a{display:block;float:left;color:#EEFFDF;
text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.green #slatenav ul li a:hover,.green #slatenav ul li a.current{
color:#fff;background:transparent
 url(/uploadfile/image/four-color-nav/greenslate_backgroundOVER.gif) 
 no-repeat top center;}
/* ---------------------- END Greenslate nav ---------------------- */
/* ---------------------- Redslate nav ---------------------- */
.red #slatenav{position:relative;display:block;height:42px;
font-size:11px;font-weight:bold;background:transparent
 url(/uploadfile/image/four-color-nav/redslate_background.gif) 
 repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;
 text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;
text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{
color:#fff;background:transparent
 url(/uploadfile/image/four-color-nav/redslate_backgroundOVER.gif) 
 no-repeat top center;}
/* ---------------------- END Redslate nav ---------------------- */
/* ---------------------- Purpleslate nav ---------------------- */
.purple #slatenav{position:relative;display:block;height:42px;
font-size:11px;font-weight:bold;background:transparent
 url(/uploadfile/image/four-color-nav/purpleslate_background.gif) 
 repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;
 text-transform:uppercase;}
.purple #slatenav ul{margin:0px;padding:0;list-style-type:none;auto;}
.purple #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.purple #slatenav ul li a{display:block;float:left;color:#FBDAFA;
text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.purple #slatenav ul li a:hover,.purple #slatenav ul li a.current{
color:#fff;background:transparent
 url(/uploadfile/image/four-color-nav/purpleslate_backgroundOVER.gif) 
 no-repeat top center;}
/* ---------------------- END Purpleslate nav ---------------------- */

HTML代码

<div class="blue">
<div id="slatenav">
<ul>
<li><a href="http://www.865171.cn/" class="current">Home</a></li>
<li><a href="http://www.865171.cn/">About Us</a></li>
<li><a href="http://www.865171.cn/">Services</a></li>
<li><a href="http://www.865171.cn/">www.865171.cn</a></li>
</ul>
</div>
</div>
<div class="green">
<div id="slatenav">
<ul>
<li><a href="http://www.865171.cn/">Home</a></li>
<li><a href="http://www.865171.cn/" class="current">About Us</a></li>
<li><a href="http://www.865171.cn/">Services</a></li>
<li><a href="http://www.865171.cn/">www.865171.cn</a></li>
</ul>
</div>
</div>
<div class="red">
<div id="slatenav">
<ul>
<li><a href="http://www.865171.cn/">Home</a></li>
<li><a href="http://www.865171.cn/">About Us</a></li>
<li><a href="http://www.865171.cn/" class="current">Services</a></li>
<li><a href="http://www.865171.cn/">www.865171.cn</a></li>
</ul>
</div>
</div>
<div class="purple">
<div id="slatenav">
<ul>
<li><a href="http://www.865171.cn/">Home</a></li>
<li><a href="http://www.865171.cn/">About Us</a></li>
<li><a href="http://www.865171.cn/">Services</a></li>
<li><a href="http://www.865171.cn/" class="current">www.865171.cn</a></li>
</ul>
</div>
</div>