HTML5 and CSS3 drop-down menu

Don't forget to visit more of CSS3 tips and tricks!

The HTML5

All you will need is a simple menu structure using <nav> and nested <ul> tags, like this:

<nav>
    <ul>
        <li><a href="/">Home</a>
            <ul>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </li>
        <li><a href="/service">Services</a>
            <ul>
                <li><a href="/service/transport">Transport</a></li>
            </ul>
        </li>
        <li><a href='/welcome/language'>Change Language</a></li>
    </ul>
</nav>

The CSS3

I am just going to comment the CSS code; hopefully that is enough explanation for you...

/********************* Nav elements ****************************/

/* Navigation menu HTML5 tag*/
nav
{
    /* No border*/
    border:none;
    border:0px;
   
    /* Ensures the text is aligned properly*/
    text-align: left;
   
    /* Margins and padding*/
    margin:0px;
    padding:0px;
}

/* Our top menu list */
nav ul
{
    /* Set's how the element will interact with adjacent elements */
    display:block;
   
    /* Sets the height of the element (needs to be larger than the text) */
    height: 35px;
   
    /* Buffer space between other containers */
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 1%;
    margin: 0;
   
    /* Does not insert bullet points*/
    list-style:none;
}

/* Float all <li> elements */
nav li{
    float:left;
}

/* Display top menu <li> items as inline */
nav ul li
{
    /* Set's how the element will interact with adjacent elements */
    display:inline;
}

/* The main menu link */
nav ul li a
{
    /* Changes the text to bold and uppercase */
    font-weight: bold;
    text-decoration:none;
    text-transform: uppercase;
   
    /* Default text colour */
    color:#CCCCCC;
   
    /* Pads the text so that it is not right up against the parent element*/
    padding: 5px;
   
    /* Specifies the line-height of the text */
    line-height:30px;
   
    /* Background colour */
    background-color: #FFFFFF;
   
    /* Border colour */
    border: 2px solid #CCCCCC;
   
        /* CSS3 Rounded Border */
    -webkit-border-radius: 8px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
        -moz-border-radius: 8px; /* FF1-3.6 */
        border-radius: 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

      /* useful if you don't want a bg color from leaking outside the border: */
      -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}

/* When we hover over (or for mobile devices, click on the element) */
nav ul li a:focus, nav ul li:focus a, nav ul li a:hover, nav ul li:hover a
{
    /* Underlines the text when we hover over it*/
    text-decoration:underline;
   
    /* Change the background colour*/
    background-color: #CCCCCC;
   
    /* Default text colour */
    color:#336666;
   
    /* Border colour */
    border: 2px solid #336666;
}

/* Our sub menus */
nav li ul
{
    /* Our background colour */
    background-color: #CCCCCC;
   
    /* HIDES the element until needed! */
    display:none;
   
    /* Let the browser determine the element height */
    height:auto;
   
    /* No padding or margins required */
    padding:0px;
    margin:0px;
   
    /* Minimum width of 120px */   
    min-width: 120px;
    width: auto;
   
    /* Use the absolute positioning method*/
    position:absolute;
   
    /* Stack this element right at the front of all elements*/
    z-index:200;
   
    /* Default text colour */
    color:#336666;
   
    /* Border colour */
    border: 2px solid #FFFFFF;
   
    /* CSS3 Rounded Border */
    -webkit-border-radius: 8px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
        -moz-border-radius: 8px; /* FF1-3.6 */
        border-radius: 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

      /* useful if you don't want a bg color from leaking outside the border: */
      -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
nav li:focus ul, nav li:hover ul
{
    /* Set's how the element will interact with adjacent elements */
    display:block;
}
nav li li
{
    /* Set's how the element will interact with adjacent elements */
    display:block;
   
    /* Do not allow the element to float around */
    float:none;
   
    /* Do not set margin */
    margin: 0;
   
    /* Take up all space given by parent element*/
    /*width:100%;*/
   
    /* Border colour */
    border: none;
}
nav li:focus li a, nav li:hover li a
{
    /* Turn off the background */
    background:none;
    border:none;
    text-decoration:none;
}
nav li ul a
{
    /* Set's how the element will interact with adjacent elements */
    display:block;
   
    /* Sets the height of the element (needs to be larger than the text) */
    /*height:35px;*/
   
    /* No margin */
    margin:0px;
    /*line-height: 20px;*/
   
    /* No border or underlines*/
    text-decoration:none;
    border:none;
   
    /* Default text colour */
    color:#CCCCCC;
}
nav li ul a:hover, nav ul li ul li:hover a
{
    /* Underlines the text when we hover over it*/
    text-decoration:underline;
   
    /* Change the background colour*/
    background-color: #336666;
   
    color: #CCCCCC;
}
nav p
{
    /* No floating elements are allowed to the left of this element */
    clear:left;
}