Use perfect CSS Tab with sub menu. Hope you will love it.
CSS Code:
<style type="text/css"> #menu { position: relative; margin-left: 0; } #menu a { display: block; padding:0 5px 0 5px; text-decoration:none; border:#ccc 1px solid } #menu a:hover { background:#ff0000; color:#fff} #menu ul { list-style-type: none; padding-top: 0; } #menu li { float: left; /*position: relative;*/ padding: 3px 0; text-align: center; } #menu ul.sub-menu { display: none; position: absolute; top: 24px; left: 0; padding: 10px; z-index: 90; margin:0; padding:0; } #menu ul.sub-menu li { text-align: left; } #menu li:hover ul.sub-menu { display: block; border: 1px solid #ccc; border-left:0px; border-right:0px; width:600px; } #menu li:hover ul.sub-menu li a { border:0px;} </style>
HTML Code:
<div id="menu"> <ul> <li><a href="#">2012</a> <ul class="sub-menu"> <li><a href="#">Pages</a></li> <li><a href="#">Archives</a></li> <li><a href="#">New Posts</a></li> <li><a href="#">Recent Comments</a></li> </ul> </li> <li><a href="#">2011</a> <ul class="sub-menu"> <li><a href="#">Get to know us</a></li> <li><a href="#">Find out what we do</a></li> </ul> </li> <li><a href="#">2010</a> <ul class="sub-menu"> <li><a href="#">E-mail Us</a></li> <li><a href="#">Use Our Contact Form</a></li> </ul> </li> </ul> </div>
Very good coding. 5V0-31.19 exam questions
ReplyDeleteThis is very nice article. I am first time Visit your website. This is great information.
ReplyDeletewww.gumawawebsite.blogspot.com