Tip: You can modify some of the code before running
<! DOCTYPE html> <pead> <meta http-equiv= "Content-type" content=; Charset=utf-8 "/> <title> Pure CSS Vertical navigation menu </title> <style> #menu1 {width:200px; float:left;} #menu1 ul {font-family:arial, Helvetica, Sans-serif; list-style-type:none; margin:0; padding:0;} #menu1 li {display:inline;} #menu1 a {color: #fff; text-decoration:none; font-size:14px; display:block; padding:3px; width:160px; background-col Or: #686C7A; border-bottom:1px solid #eee; } #menu1 A:link, #menu a:visited {color: #EEE; Text-decoration:none} #menu1 a:hover {background-color: #00BEE4; color: #fff;} #menu1 Li A#current {border-bottom:3px solid #DAD6B7; background: #00BEE4;} #menu2 {width:200px; float:left;} #menu2 ul {font-family:arial, Helvetica, Sans-serif; list-style-type:none; margin:0; padding:0;} #menu2 li {display:i nline; /* for IE5 and IE6/} #menu2 a {color: #483000; text-decoration:none; font-size:14px; display:block; padding:3pX width:160px; Background-color: #F0F0D8; border-bottom:1px solid #fff; } #menu2 A:link, #menu a:visited {color: #483000; Text-decoration:none} #menu2 a:hover {background-color: #487890; color: #fff;} #menu2 Li A#current {border-bottom:3px solid #C0C018; background: #487890; color: #fff;} #menu3 {width:200px; float: Left #menu3 ul {font-family:arial, Helvetica, Sans-serif; list-style-type:circle; list-style-position:inside; margin:0; p adding:0; #menu3 li {display:inline/* for IE5 and IE6/} #menu3 a {color: #483000; text-decoration:none; font-size:14px; Display:block; padding:3px; width:160px; Background-color: #fff; border-bottom:1px solid #fff; } #menu3 A:link, #menu3 a:visited {color: #483000; Text-decoration:none} #menu3 a:hover {border-left:3px solid #901818; color: #000;} #menu3 Li A#current {border-left:3px solid #901818; background: #F0F0F0; color: #000}/* Menu 3 ends here/* Menu 4 Starts Here */#menu4 {width:200pX Float:left; #menu4 ul {font-family:arial, Helvetica, Sans-serif; list-style-type:none; margin:0; padding:0;} #menu4 li {display : inline; /* for IE5 and IE6 * * margin:0px 0px 2px 0px; #menu4 a {color: #000; text-decoration:none; font-size:14px; display:block; padding:3px; width:160px; background- Color: #FDFCF3; border:1px dotted #B5E3C7; margin:0px 0px 2px 0px; } #menu4 A:link, #menu4 a:visited {color: #000; Text-decoration:none} #menu4 a:hover {background-color: #B5E3C7; color: #FDFCF3;} #menu4 Li A#current {border:1px solid #B5E3C7; background: #B5E3C7; color: #FDFCF3}/* Menu 4 ends here/* </style > </pead> <body> <div id= "menu1" > <ul> <li>item one</li> <li>item two</ li> <li>item three</li> <li>item four</li> <li>item five</li> </ul> </ div> <div id= "menu2" > <ul> <li>item one</li> <li>item two</li>-<li>itemthree</li> <li>item four</li> <li>item five</li> </ul> </div> <div > /><br/></div> <div id= "Menu3" > <ul> <li>item one</li> <li>item two <br </li> <li>item three</li> <li>item four</li> <li>item five</li> </ul> </div> <div id= "Menu4" > <ul> <li>item one</li> <li>item two</li> <li> Item three</li> <li>item four</li> <li>item five</li> </ul> </div> </body > </ptml></td> </tr> </table>
Tip: You can modify some of the code before running
