Implementing a Drop Down Menu

Using CSS Positioning

Table of Contents

1.Study the Sample HTML Code for Drop Down Menu

2.Incorporate a Drop Down Menu into your Layout

3.Review CSS Syntax / Terminology

4.Review CSS Positioning

5.Use CSS Positioning to Overlap Menu on Top of Content/Footer

6.Fix Borders, if Necessary

7.Test Your Page

In this tutorial you willhow you can use positioning to create a drop down menu in your navigation bar.
If you need additional help working on this lab, check these references:
  • (search for “CSS Positioning”)
You can also google for sample code that’s relevant to your problem. And, of course, you can always ask for help.

1.Study the Sample HTML Code for Drop Down Menu

Study the following sample code that implements a drop down menu. Create your own HTML page from this code and test it.

<html>
<head>
<style type = "text/css">
body { font-family: arial, sans-serif } /* default font for the whole page (body) */
.menu
{ font-weight: bold;
color: white; /* the font color */
border: 2px solid DarkBlue;
text-align: center;
width: 10em; /* "em" is a measurement which means the size of a capital letter M */
background-color: DarkBlue }
.menu:hover a /* style for any <a> link element in a html element with class="menu" that the mouse is hovering over */
{ display: block } /* display: block means visible */
.menu a /* style for any <a> link element that's inside a html element with class="menu" */
{ display: none; /* display: none means invisible */
border-top: 2px solid DarkBlue;
background-color: White;
width: 10em;
text-decoration: none; /* this means do not underline the link */
color: black }
.menu a:hover /* changes the bg color when mouse hovers over a <a> link in a div with class="menu" */
{ background-color: LightBlue }
</style>
</head>
<body>
<div class = "menu">Menu Demo
<a>Home</a>
<a>News</a>
<a>Articles</a>
<a>Blog</a>
</div>
</body>
</html>

Why does this work?

  • “display:none” means invisible and “display:block” means visible.
  • The “.menu a” selector (with display:none) makes all the links (“a” tags) in the menu class invisible at first rendering.
  • The “.menu:hover a” selector (with display:block) makes all the “a” tags visible when the mouse hovers over the menu class.
  • The “a” links all show up on a new line because selector “menu” (container for links) has its width set to 10em and the links in the menu are also set with the same width (see purple style rules).
  • The “.menu a:hover” selector changes the background color of the particular link that the mouse is over.

2.Incorporate a Drop Down Menu into your Layout

Add the four styles from the sample above into a copy of your current index page and apply the menu class to your “Labs” tab that will become your drop down menu. Notice that you need to add a menu group heading (that is not a link) above the dropdown menu items. This is shown in red below.

<div class="nav">
<div class="tab selected">
<a href="index.php">Home</a>
</div>
<div class="tab">
<a href="products.php">Products</a>
</div>
<div class="tab">
<a href="customers.php">Customers</a>
</div>
<div class="tab">
<a href="contact.php">Contact</a>
</div>
<div class="tab">
<div class="menu">Labs
<a href="labs.php">All Labs</a>
<a href="labs.php#lab3">HomePage</a>
<a href=" labs.php#lab4">Javascript</a>
<a href=" labs.php#lab5">Display/a>
</div>
</div
<div class="newLine"</div>
</div> /

On your labs.php page, add anchors to your headings like this:

<h2<a id="lab3">Lab 3 Home Page</a</h2>

<h2<a id="lab4">Lab 4 Forms Javascript Cookies</a</h2>

Things should be looking pretty good, except for the fact that when you open up a drop down menu, the whole title-nav area gets bigger which makes the content-footer area slide down – and that does not look professional.

3.Review CSS Syntax / Terminology

4.Review CSS Positioning

If you have not already studied the 4 different types of CSS positioning, do so now: CSS positioning can be tricky if you have any misconceptions about how it works. You will not be able overlap any <divs> unless you study and understand this material fully.

I have summarized most of the w3schools text below (but without the helpful try-it-yourself examples):

  • The CSS “position” property allows you to position an element. The normal/default positioning is “static” which just means all elements are placed according to the “normal flow” (in-line elements are positioned left to right, wrapping when necessary and block elements, unless floated, are positioned top to bottom). Using other CSS position values, elements can be positioned:
  • with respect to the browser window (fixed positioning),
  • with respect to its parent container (absolute positioing), or
  • with respect to where it would have been “in the normal flow” (relativepositioning).
  • In cases where elements overlap, you can specify which is on top using the z-index property.
  • Elements that are fixed, absolute, or relative can be positioned using the top, bottom, left, and right properties.

More about the various position values…

  • Static Positioning
  • HTML elements are positioned static by default.
  • A static positioned element is always positioned according to the normal flow of the page (left to right, then top to bottom).
  • Static positioned elements are not affected by the top, bottom, left, and right properties.
  • Fixed Positioning
  • Fixed positioned elements are positioned relative to the browser window. Fixed positioned elements do not move even if the window is scrolled.
  • Fixed positioned elements are removed from the normal flow – other elements in the document behave like the fixed positioned element does not exist.
  • Fixed positioned elements can overlap other elements.
  • Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.
  • Relative Positioning
  • A relative positioned element is not removed from the normal flow.
  • A relative positioned element can be moved to the left right, top or bottom of where it would have been in the normal flow.
  • Although relatively positioned elements may be moved and overlap other elements, the reserved space for the element is still preserved in the normal flow.
  • Relatively positioned elements are often used as container blocks for absolutely positioned elements.
  • Absolute Positioning
  • An absolute position element is positioned with respect to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:
  • Absolutely positioned elements are removed from the normal flow. Other elements in the document behave like the absolutely positioned element does not exist.
  • Absolutely positioned elements can overlap other elements.
  • Overlapping Elements
  • With CSS positioning, elements can overlap each other.
  • Use the z-index to specify which element is on top of which. An element with a greater value for z-index will be on top of an element with a lower z-index.
  • Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.

5.Use CSS Positioning to Overlap Menu on Top of Content/Footer

To stop the Content/Footer from moving down when the nav bar expands, we first need to make the container div be relative so that we can position its children (title, nav, and contentFooter) absolutely inside of it.

container
title
nav bar
contentFooter
content
footer

Suppose your title was 100px high and your nav bar (before drop-down expanded) was 50px high. You would

  • "pin" the title to "top:0px" within the container and set its z-index to 1
  • "pin" the navbar to "top:100px" within the container and set its z-index to 3
  • "pin" the content/footer to "top: 150px" within the container and set its z-index to 2

If you do not have a contentFooter div, create one now, because, it is the contentFooter that you will be pinning. You could pin the content, but then the footer would not be following the content. Leave the content and the footer as regularly positioned elements (position: static which is the default positioning). Put them both inside of a contentFooter div, then this is the div you will be "pinning" within the container.

For your layout, you may like to change the z-index values depending on exactly how you want things to overlay each other. You can figure this out after you are "tweaking" your final layout.

  1. make the container div be relative so that it can have absolutely positioned children.

.container { position:relative; /*…*/ }

  1. Make the title absolute and set its top property so that it is at the top of the container. Set its z-index low so that the title is under the nav bar.

.title { position:absolute; top:0px z-index:1; /* ... */ }

  1. Make the nav absolute and set its top property to be where you want it under the title. Set its z-index highest so that the nav bar always stays on top of the title and the contentFooter.

.nav { position:absolute; top:100px; z-index:3; /*... */ }

  1. Make the content/footer div absolute and set it's top property. Set its z-index value.

.contentFooter { position:absolute; top:150px; z-index:2; /*... */ }

Line things up by adjusting the values for the top property of your nav and of your contentFooter. Since you will be using pixel count to position the top of these divs, make sure that everything that affects the height of your title and your nav is specified in pixels (e.g., font-size, padding).

6.Fix Borders, if Necessary

When the container’s children became absolute (and thus removed from the normal flow), the container basically became empty. So, if your container had a border, remove the border from the container and place whatever borders you want on its children (title, nav, contentFooter).

7.Test Your Page

Here is how your page might look when you are finished:

Copy / paste a lot of text in your content area to be sure things still work OK when the text is longer than the screen. For example, you might have gotten things to look OK using fixed positioning for the content/footer, but that would only work for text if the content fit into one screen.

1 / Sally Kyvernitis: Drop Down Menus with CSS Positioning