Sorry for the skip last week - had a major project deadline to attend to that sopped up my time.

Today 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

Code html:
<!DOCTYPE html>
  <style type="text/css">
    /* Put your css here */
<div class="Superfish-wrap">
  <ul class="Superfish menu">
    <li class="selected current tab"><a href="" >Home</a></li>
    <li class="tab"><a href="">Forums</a>
      <ul class="children">
        <li><a href="" >Web Content</a></li>
        <li><a href="" >Design Your Site</a></li>
        <li><a href="" >Program Your Site</a></li>
        <li><a href="" >Host Your Site</a></li>
        <li><a href="" >Manage Your Site</a></li>
        <li><a href="" >Community Center</a></li>
    <li class="tab"><a style="cursor:default;">Resources</a>
      <ul class="children">
        <li><a href="" >Newsletters</a></li>
        <li><a href="" >Podcast</a></li>
        <li><a href="" >CSS Reference</a></li>
        <li><a href="" >HTML Reference</a></li>
        <li><a href="" >Javascript Reference</a></li>
        <li><a href="" >Tools</a></li>
        <li><a href="" >HTML5 Dev Center</a></li>
        <li><a href="" >Hosting Reviews</a></li>
    <li class="tab"><a href="" target="_blank">Deals</a></li>
    <li class="tab"><a href="" >Bookstore</a>
      <ul class="children">
        <li><a href="" >Find the right book</a></li>
        <li><a href="" >New Releases</a></li>
        <li><a href="" >Web Development Books</a></li>
        <li><a href="" >Web Design Books</a></li>
        <li><a href="" >Business & Marketing Books</a></li>
        <li><a href="" >Books for Educators</a></li>
        <li><a href="" >Frequently Asked Questions</a></li>
        <li><a href="" >Shipping Rates & Times</a></li>
    <li class="tab"><a href="" >Market</a></li>
    <li class="tab"><a href="" >Courses</a></li>
    <li class="sitepoint-network-tab tab"><a href="" >Sitepoint Network</a>
      <ul class="children">
        <li class="jspro"><a href="" >JSPro</a></li>
        <li class="buildmobile-link"><a href="" >BuildMobile</a></li>
        <li class="designfestival-link"><a href="" >DesignFestival</a></li>
        <li class="rubysource-link"><a href="" >RubySource</a></li>
        <li class="cloudspring-link"><a href="" >CloudSpring</a></li>
        <li class="phpmaster-link"><a href="" >PHPMaster</a></li>
        <li class="learnable"><a href="" >Learnable</a></li>
        <li class="sitepointmarket-link"><a href="" >SitePoint Market</a></li>

Sitepoint uses a jQuery plugin called Superfish to insure backward compatibility with older browsers, even IE 6. In our exercise we will work only with the CSS needed to do the effect since modern browsers can achieve the effect without any Java Script.

Beginner Challenge: Replicate the SitePoint homepage dropdowns in CSS only. You'll need to make use of the li:hover attribute, position relative and position absolute. Don't fret so much on 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.

When sharing your answers in the thread, use spoilers.

[code][spoiler]This is spoiler text[/spoiler][/code]


This is spoiler text