Dropdowns with CSS

New CSS

A few new bits of code. First off, the compound selector that defines the children of another selector: the greater than symbol (>). This will select elements within a specific parent element, for example:

#content > p {font-family: serif;}

This would change the font family of every paragraph that has a parent in the content div to change to a serif typeface.

It's necessary with the dropdown because we need it to make the hover effects work.

Positioning

This is the first time we've really had to use positioning. There are two new positions we're using: relative and absolute.

Absolute

According to the W3Schools absolute positioning means: "The element is positioned relative to its first positioned (not static) ancestor element"

Relative

And the W3Schools says: "The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position"

See these in action here.

Building the HTML

The HTML is a little tricky for these too. We will be putting our dropdown menus inside nested unordered lists. The syntax for these, looks like this:

<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a>

Note that we didn't close the list item yet! Before we do that, we include the nested list, which will be our dropdown.

<ul>
<li><a href="#">Submenu-1</a></li>
<li><a href="#">Sub-2</a></li>
<li><a href="#">Thirdsub</a></li>
</ul>

NOW we close the second list item after the embedded list!
</li>

Then the rest of the list needs to be finished.
<li><a href="#">Item Three</a></li>
</ul>