<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<TITLE>DIV+CSS-made navigation menu </title>
<style type= "Text/css" >
. clear{Clear:both}
#nav {height:30px; border:1px solid #666; background: #999; line-height:30px}
#nav li{float:left; display:block; width:100px; List-style:none}
. menu:link{color: #FFFFFF; font-size:12px; text-decoration:none;display:block; text-align:center; line-height:30px}
. menu:hover{background: #000; width:100px; height:30px; color: #FFFF00; display:block; text-align:center; line-height : 30px}
#nav2 {width:100px; height:30px; float:left; text-align:center; line-height:30px}
. menu2:link{color: #999900; font-size:12px}
. menu2:hover{color: #fff; background:blue; display:block; height:30px; width:100px}
. nav2bg{height:30px; Background-color: #E3E3E3;}
. nav2bg:hover{Background:yellow; Cursor:default}
</style>
<body>
<!--method One----
<div id= "NAV" >
<li><a href= "#" class= "menu" > Test </a></li>
<li><a href= "#" class= "menu" > Test </a></li>
<li><a href= "#" class= "menu" > Test </a></li>
<li><a href= "#" class= "menu" > Test </a></li>
<li><a href= "#" class= "menu" > Test </a></li>
</div>
<div class= "Clear" ></div>
<!--method Two--
<div class= "NAV2BG" >
<div id= "nav2" ><a href= "#" class= "menu2" > Test </a></div>
<div id= "nav2" ><a href= "#" class= "menu2" > Test </a></div>
<div id= "nav2" ><a href= "#" class= "menu2" > Test </a></div>
<div id= "nav2" ><a href= "#" class= "menu2" > Test </a></div>
<div id= "nav2" ><a href= "#" class= "menu2" > Test </a></div>
</div>
<div class= "Clear" ></div>
</body>
DIV+CSS-Made navigation menu