Using the position property in useful ways

Be sure that you read the dropdown menu lecture notes, and view the video tutorials.

This exercise contains the following pages

  1. dropdown: just the dropdown mechanism
  2. dropdown2: simple styles
  3. dropdown3: fancier styles

The embedded style sheets have comment delimiters to help you put styles in logical places. Read the comments, and put your style rules for the menu in their proper location.

Dropdown 1

This dropdown menu is only to get the mechanism working. You'll need to do the following:

  • Remove default styling from all the unordered lists (bullet, indent, etc)
  • Create a horizontal menu using the "float" method (remember to use the overflow property on the #menu)
  • Set the width of the list items and nested list to 200px (of course, any menu you design will probably have different widths)
  • use position property to "hide" nested list and then "show" it again when you hover over its parent list item

The screen shot can show you what the menu looks like when you don't reveal the dropdowns or the hover styles. View the video to see what you menu looks like when you actually use it.

Dropdown 2

Begin by getting the mechanism working just like the first menu.

Then fancy it up a little bit:

  • The #menu needs a background color to serve as a menu bar. Use silver.
  • The nested anchor tags also need this same background color (silver). You need a very specific descendant selector so you don't style the top level hyperlinks. Our notes show the different specifics that filter for each of the repeated elements in a dropdown menu.
  • Because we're styling the hyperlink boxes, you need to change the display to block (all the menu anchor tags)
  • You'll add 10px of padding to tops and bottoms of all the anchor tags as well. That makes the menu bar itself taller, too.
  • The background color for hover for all the anchor tags is gray.
  • The color of the text for hover for all the anchor tags is black.

The screen shot can show you what the menu looks like when you don't reveal the dropdowns or the hover styles. View the video to see what you menu looks like when you actually use it.

Dropdown 3

This menu is more complex because you need to use child selectors. The other two menus only use descendant selectors.

The reason you need child selectors is that you need to style only the top-level list item and only the top level anchor tag. Descendent selectors can filter for the last of these, but not for the first. The notes and video tutorials will help you with this, so be sure you read/watch them.

Begin by getting the mechanism working just like the first menu. Then:

  • Align the text to the center in the #menu.
  • The anchor tag needs to generate a block display box.
  • All anchor tags have 10px padding on tops and bottoms.
  • The background color for the hyperlinks is white. On hover, the background color for the hyperlinks is silver.
  • The 1px border on the anchor tag is dark cyan, and changes to black on hover.
  • The color for the hyperlinks is dark cyan. On hover, the color is black.
  • To get the proper intervals between the list items in the dropdown, the nested list items have 6px margin on their bottom.
  • To get the proper interval between the menu and the dropdown nested list, the nested list needs 6px padding on its top. This is the same selector you used position to "hide" the nested list with.

Now for the child selector part:

  • You want an interval between the top level list items. Use a child selector to put a 20px right margin on the top level list items.
  • You want the top level anchor tag to display all caps. Use a child selector and the text-transform property to make that text all caps.
  • You want to "hold" the hover on the top level anchor tag even when you mouse over the nested list. Use a child selector to specify the same hover styles when the top level list item is being hovered over. The videos will show you how this is done.

The screen shot can show you what the menu looks like when you don't reveal the dropdowns or the hover styles. View the video to see what you menu looks like when you actually use it.