Menu test

• Item one
• Item two
• Item three
• Item four
• Item five

• Item one
• Item two
• Item three
• Item four
• Item five

• Item one
• Item two
• Item three
• Item four
• Item five

• Item one
• Item two
• Item three
• Item four
• Item five

<div id="menu1"><br /><ul><br /><li><a href="#" id="current">Item one</a></li><br /><li><a href="#">Item two</a></li><br /><li><a href="#">Item three</a></li><br /><br /><li><a href="#">Item four</a></li><br /><li><a href="#">Item five</a></li><br /></ul><br /></div><br /><br /><div id="menu2"><br /><ul><br /><li><a href="#" id="current">Item one</a></li><br /><li><a href="#">Item two</a></li><br /><li><a href="#">Item three</a></li><br /><li><a href="#">Item four</a></li><br /><br /><li><a href="#">Item five</a></li><br /></ul><br /></div><br /><div style="clear:both;"><br /><br /></div><br /><div id="menu3"><br /><ul><br /><li><a href="#" id="current">Item one</a></li><br /><li><a href="#">Item two</a></li><br /><li><a href="#">Item three</a></li><br /><li><a href="#">Item four</a></li><br /><li><a href="#">Item five</a></li><br /><br /></ul><br /></div><br /><br /><div id="menu4"><br /><ul><br /><li><a href="#" id="current">Item one</a></li><br /><li><a href="#">Item two</a></li><br /><li><a href="#">Item three</a></li><br /><li><a href="#">Item four</a></li><br /><li><a href="#">Item five</a></li><br /></ul><br /></div><br />

CSS style ကေအာက္ပါအတိုင္း ေရးထားပါတယ္။

<br />/* Menu 1 starts here */<br />#menu1 {<br />width: 200px;<br />float:left;<br />}<br /><br />#menu1 ul<br />{<br />font-family: Arial, Helvetica, sans-serif;<br />list-style-type:none;<br />margin:0;<br />padding:0;<br />}<br /><br />#menu1 li<br />{<br />display: inline;<br />/* for IE5 and IE6 */<br />}<br /><br />#menu1 a<br />{<br />color: #fff;<br />text-decoration: none;<br />font-size: 14px;<br />display: block;<br />padding: 3px;<br />width: 160px;<br />background-color: #686C7A;<br />border-bottom: 1px solid #eee;<br />}<br /><br />#menu1 a:link, #menu a:visited<br />{<br />color: #EEE;<br />text-decoration: none;<br />}<br /><br />#menu1 a:hover<br />{<br />background-color: #00BEE4;<br />color: #fff;<br />}<br /><br />#menu1 li a#current<br />{<br />border-bottom: 3px solid #DAD6B7;<br />background: #00BEE4;<br />}<br />/* Menu 1 ends here */<br /><br /><br />/* Menu 2 starts here */<br />#menu2 {<br />width: 200px;<br />float:left;<br />}<br /><br />#menu2 ul<br />{<br />font-family: Arial, Helvetica, sans-serif;<br />list-style-type:none;<br />margin:0;<br />padding:0;<br />}<br />#menu2 li<br />{<br />display: inline;<br />/* for IE5 and IE6 */<br />}<br /><br />#menu2 a<br />{<br />color: #483000;<br />text-decoration: none;<br />font-size: 14px;<br />display: block;<br />padding: 3px;<br />width: 160px;<br />background-color: #F0F0D8;<br />border-bottom: 1px solid #fff;<br />}<br /><br />#menu2 a:link, #menu a:visited<br />{<br />color: #483000;<br />text-decoration: none;<br />}<br /><br />#menu2 a:hover<br />{<br />background-color: #487890 ;<br />color: #fff;<br />}<br /><br />#menu2 li a#current<br />{<br />border-bottom: 3px solid #C0C018;<br />background: #487890 ;<br />color: #fff;<br />}<br />/* Menu 2 ends here */<br /><br /><br />/* Menu 3 starts here */<br />#menu3 {<br />width: 200px;<br />float:left;<br />}<br /><br />#menu3 ul<br />{<br />font-family: Arial, Helvetica, sans-serif;<br />list-style-type: circle;<br />list-style-position:inside;<br />margin:0;<br />padding:0;<br />}<br />#menu3 li<br />{<br />display: inline;<br />/* for IE5 and IE6 */<br />}<br /><br />#menu3 a<br />{<br />color: #483000;<br />text-decoration: none;<br />font-size: 14px;<br />display: block;<br />padding: 3px;<br />width: 160px;<br />background-color: #fff;<br />border-bottom: 1px solid #fff;<br />}<br /><br />#menu3 a:link, #menu3 a:visited<br />{<br />color: #483000;<br />text-decoration: none;<br />}<br /><br />#menu3 a:hover<br />{<br />border-left: 3px solid #901818;<br />color: #000;<br />}<br /><br />#menu3 li a#current<br />{<br />border-left: 3px solid #901818;<br />background: #F0F0F0;<br />color: #000;<br />}<br />/* Menu 3 ends here */<br /><br /><br />/* Menu 4 starts here */<br />#menu4 {<br />width: 200px;<br />float:left;<br />}<br /><br />#menu4 ul<br />{<br />font-family: Arial, Helvetica, sans-serif;<br />list-style-type:none;<br />margin:0;<br />padding:0;<br />}<br />#menu4 li<br />{<br />display: inline;<br />/* for IE5 and IE6 */<br />margin:0px 0px 2px 0px;<br />}<br /><br />#menu4 a<br />{<br />color: #000;<br />text-decoration: none;<br />font-size: 14px;<br />display: block;<br />padding: 3px;<br />width: 160px;<br />background-color: #FDFCF3;<br />border: 1px dotted #B5E3C7;<br />margin:0px 0px 2px 0px;<br />}<br /><br />#menu4 a:link, #menu4 a:visited<br />{<br />color: #000;<br />text-decoration: none;<br />}<br /><br />#menu4 a:hover<br />{<br />background-color: #B5E3C7 ;<br />color: #FDFCF3;<br />}<br /><br />#menu4 li a#current<br />{<br />border: 1px solid #B5E3C7;<br />background: #B5E3C7 ;<br />color: #FDFCF3;<br />}<br />/* Menu 4 ends here */<br />