How do you make a 2-tiered menu?


How would I get started?

This site is the perfect example:

This site also has one:

Could I just use their js and css and place it on my site?

<link rel="stylesheet" href="" type="text/css" media="screen" /> <!-- jQuery --> <script type="text/javascript" src=""></script> <!-- jQuery Functions --> <script type="text/javascript" src=""></script> <script type="text/javascript" src=""></script> <script type="text/javascript" src=""></script> <script type="text/javascript"> $(document).ready(function(){ $("ul.sf-menu").superfish({ pathClass: 'current' }); }); </script> <a name="top"></a> <div class="wrap"> <div id="the-new-menu-cont"> <div class="box"> <div class="box-inner"><div id="new-nav" class="box-bottom-nav-new"> <div class="new-cool-menu"> <ul id="new-menu-ul" class="sf-menu sf-navbar"> <li id="menu-home" class="current"> <ul> <li class="current"><a href="">Home</a></li> <li class=""><a href="">About Apple Reviews</a></li> <li><a href="">Submit Story</a></li> <li><a href="">Anonymous Mailer</a></li> <li class=""><a href="">Authors</a></li> <li class=""><a href="">Contribute</a></li> <li class=""><a href="">Contact</a></li> <li><a href="">RSS</a></li> </ul> </li> <li id="menu-reviews" class=""><a href="">Reviews <img src="" alt="Reviews" border="0" /><span>Hands on experience</span></a> <ul> <li class=""><a href="">Latest Reviews</a></li> <li class=""><a href="">Product Reviews</a></li> <li class=""><a href="">Featured Reviews</a></li> </ul> </li> <li id="menu-hardware" class=""><a href="">Hardware <img src="" alt="Hardware" border="0" /><span>Products You Need</span></a> <ul> <li class=""><a href="">Apple Hardware</a></li> <li class=""><a href="">Accessories</a></li> <li class=""><a href="">New Hardware</a></li> </ul> </li> <li id="menu-software" class=""><a href="">Software <img src="" alt="Software" border="0" /><span>Products You Want</span></a> <ul> <li class=""><a href="">Latest Reviews</a></li> <li class=""><a href="">Product Reviews</a></li> <li class=""><a href="">Featured Reviews</a></li> </ul> </li> <li id="menu-iphone" class=""><a href="">iPhone <img src="" alt="iPhone" border="0" /><span>Apps, Tips & Tricks</span></a> <ul> <li class=""><a href="">Software</a></li> <li class=""><a href="">Hardware</a></li> <li class=""><a href="">Accessories</a></li> </ul> </li> <li id="menu-buzz" class=""><a href="">Latest Buzz <img src="" alt="Latest Buzz" border="0" /><span>News and Rumors</span></a> <ul> <li class=""><a href="">Popular News</a></li> <li class=""><a href="">Apple Insider</a></li> <li class=""><a href="">Mac Rumors</a></li> <li class=""><a href="">TUAW</a></li> <li class=""><a href="">Ars Technica</a></li> <li class=""><a href="">Apple</a></li> <li class=""><a href="">Apple Reviews</a></li> </ul> </li> <li id="menu-community" ><a href="">Twitter <img src="" alt="Community" border="0" /><span>Follow us to win!</span></a>                                                              









						</div><!-- new-cool-menu -->                            



	</div><!-- box -->   			


</div><!-- the-new-menu-cont -->    




They're called dropline menus, and here are some tutorial links:

But I'd still like to know how to accomplish the ones on the sites I listed above. Can I just steal them?

This article has been dead for over six months: Start a new discussion instead
Start New Discussion
View similar articles that have also been tagged: