Next up in our series of SitePoint forums quick code challenges we’re going to move away from the esoteric and cute (checkerboards, spinning dice) to something more concrete and practical: drop down menus. You don’t have to go far to spot one — there’s one on the SitePoint homepage.

Here’s a copy of the relevant HTML:

<!DOCTYPE html>
<head>
  <style type="text/css">
    /* Put your css here */
  </style>
</head>
<body>
<div>
  <ul>
    <li><a href="http://www.sitepoint.com" >Home</a></li>
    <li><a href="http://www.sitepoint.com/forums/">Forums</a>
      <ul>
        <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?240-Web-Content" >Web Content</a></li>
        <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?40-Design-Your-Site" >Design Your Site</a></li>
        <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?4-Program-Your-Site" >Program Your Site</a></li>
        <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?95-Host-Your-Site" >Host Your Site</a></li>
        <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?45-Manage-Your-Site" >Manage Your Site</a></li>
        <li><a href="http://www.sitepoint.com/forums/forumdisplay.php?47-Community-Center" >Community Center</a></li>
      </ul>
    </li>
    <li><a style="cursor:default;">Resources</a>
      <ul>
        <li><a href="http://www.sitepoint.com/newsletter/#subscription-info" >Newsletters</a></li>
        <li><a href="http://www.sitepoint.com/category/podcast/" >Podcast</a></li>
        <li><a href="http://reference.sitepoint.com/css" >CSS Reference</a></li>
        <li><a href="http://reference.sitepoint.com/html" >HTML Reference</a></li>
        <li><a href="http://reference.sitepoint.com/javascript" >Javascript Reference</a></li>
        <li><a href="http://www.sitepoint.com/tools/" >Tools</a></li>
        <li><a href="http://www.sitepoint.com/tag/html5-dev-center/" >HTML5 Dev Center</a></li>
        <li><a href="http://www.sitepoint.com/web-hosting-reviews/" >Hosting Reviews</a></li>
      </ul>
    </li>
    <li><a href="http://dealfuel.com/?utm_source=sitepoint&utm_medium=menu&utm_campaign=sitepoint" target="_blank">Deals</a></li>
    <li><a href="http://products.sitepoint.com/" >Bookstore</a>
      <ul>
        <li><a href="http://www.sitepoint.com/books-matrix/" >Find the right book</a></li>
        <li><a href="http://products.sitepoint.com/" >New Releases</a></li>
        <li><a href="http://products.sitepoint.com/development" >Web Development Books</a></li>
        <li><a href="http://products.sitepoint.com/design" >Web Design Books</a></li>
        <li><a href="http://products.sitepoint.com/business" >Business & Marketing Books</a></li>
        <li><a href="http://www.sitepoint.com/for-educators/" >Books for Educators</a></li>
        <li><a href="http://www.sitepoint.com/frequently-asked-questions/" >Frequently Asked Questions</a></li>
        <li><a href="http://www.sitepoint.com/shipping/" >Shipping Rates & Times</a></li>
      </ul>
    </li>
    <li><a href="http://www.sitepointmarket.com" >Market</a></li>
    <li><a href="https://learnable.com/sitepoint" >Courses</a></li>
    <li><a href="http://www.sitepoint.com" >Sitepoint Network</a>
      <ul>
        <li><a href="http://www.sitepoint.com/" >JSPro</a></li>
        <li><a href="http://www.sitepoint.com" >BuildMobile</a></li>
        <li><a href="http://www.sitepoint.com" >DesignFestival</a></li>
        <li><a href="http://www.sitepoint.com" >RubySource</a></li>
        <li><a href="http://www.sitepoint.com" >CloudSpring</a></li>
        <li><a href="http://www.sitepoint.com" >PHPMaster</a></li>
        <li><a href="http://learnable.com/" >Learnable</a></li>
        <li><a href="http://www.sitepointmarket.com" >SitePoint Market</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

SitePoint uses a jQuery plugin called Superfish to insure backward compatibility with older browsers, even IE 6. In this exercise we will work only with the CSS needed to create the effect since modern browsers can achieve it without any JavaScript.

Beginner Challenge
Replicate the SitePoint homepage drop downs in CSS only. You’ll need to make use of the li:hover attribute, position relative and position absolute.
Don’t fret to much about the color, font and spacing, the goal here is to master and understand the effect of a drop down menu.

Advanced Challenge
Use CSS media queries to change the menu into an accordion for phones. Keep in mind that phones register the first touch on an element as a :hover.

Expert Challenge
Using CSS transitions, make the menus fold or fade in, dissolve out, or whatever suits your fancy. You may need to modify the HTML for more elaborate effects.

Have fun!

You can find the answers here.

Formerly a developer in the corporate world, HAWK (known as Sarah by her mother) said goodbye to the code and succumbed to the lure of social media. Community Manager for the SitePoint network for several years now. If you're a member of our community you'll be familiar with ^hawk.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


  • http://www.inspire2rise.com/ Aditya Nath Jha

    And this is awesome! Will try to create a cool hover drop down menu for my site too!! :D

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.