#cssdropdown, #cssdropdown ul { list-style: none; } #cssdropdown, #cssdropdown * { padding: 0; margin: 0; list-style: none; } #cssdropdown li.headlink { width: 165px; float: left; margin-left: -1px; border: 1px black solid; text-align: center; } #cssdropdown li.headlink a { display: block; padding:0; text-decoration: none; } #cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; } #cssdropdown li.headlink:hover ul { display: block; } #cssdropdown li.headlink ul li a { padding: 0; height: 17px; } #cssdropdown li.headlink ul li a:hover { background-color: #333; } #cssdropdown a { color: white; } #cssdropdown ul li a:hover { text-decoration: none; } #cssdropdown li.headlink { background-color:#262626; } #cssdropdown li.headlink:hover { background-color:#333; } #cssdropdown li.headlink ul { background-color:#262626; } #cssdropdown li.headlink a { font-size:16px; font-weight:bold; line-height:44px; } #cssdropdown li.headlink ul li a { font-size:12px; font-weight:normal; border-top:solid 1px #000000; line-height:30px; height:30px; padding-left:5px; text-align:left; } #cssdropdown li.headlink ul li a.first { margin-top:-1px; } #cssdropdown { position:absolute; top:0; left:0; } $(document).ready(function(){ $('#cssdropdown li.headlink').hover( function() { $('ul', this).css('display', 'block'); }, function() { $('ul', this).css('display', 'none'); }); }); <table width="1000" border="1" cellpadding="0" cellspacing="0"> <tr> <td><div style="position:relative;"> <ul id="cssdropdown"> <li class="headlink"> <a href="#">Home</a> </li> <li class="headlink"><a href="#">Archive 2008</a> <ul> <li><a href="#" class="first">Archive 2008</a></li> <li><a href="#">Archive 2009</a></li> <li><a href="#">Archive 2010</a></li> <li><a href="#">Archive 2011</a></li> <li><a href="#">Posts Atom</a></li> </ul> </li> <li class="headlink"><a href="#">Archive 2009</a></li> <li class="headlink"><a href="#">Archive 2010</a></li> <li class="headlink"><a href="#">Archive 2011</a></li> <li class="headlink"><a href="#">Posts Atom</a></li> </ul> </div></td> </tr> <tr> <td height="100" bgcolor="#FFFFFF">Content</td> </tr> </table>
Wednesday, July 20, 2011
CSS Dropdown Menu
Labels:
css3
,
menu
,
ui dropdown
Subscribe to:
Post Comments
(
Atom
)
0 comments :
Post a Comment