Menu Samples of
Vertical Drop Down Menus and Horizontal Drop Down Menus

The following Menu Samples provide a varied display of
vertical or horizontal drop down menus designed in JavaScript, CSS and HTML.

(click on images to see the actual sites)

There are many different ways to design a drop down menu. A vertical menu can be used when the site is not image intensive and contains only short pages because about 20% of the width of the page is used up for the menu and everything under the menu will remain blank and cause wasted space. Otherwise a horizontal drop down menu should be used.

Horizontal Drop Down Menus in CSS, HTML and Javascript

When the website has a lot of pages and sub menus then horizontal drop down menus are often needed. Most browsers support menus designed in HTML and CSS. Some search engines can't read Javascript, so a combination of all 3 is sometimes needed for drop down menus.

The following horizontal drop down menu with the sub menu showing is written in HTML and CSS with JavaScript enhancement for mouseovers.

Horizontal Drop Down menu sample

This horizontal drop down menu, using CSS, Javascript and HTML, (and the one used on Lori's Web Design logo at top of page), is available from the MyGoSuMenu site. It is a free menu and also free for commercial use. The version used above was DropDownMenu1 (horizontal) and displays correctly on all Major browsers including Win XP IE 6. Several menu styles come in one download.

Note: The above menu sample was positioned with absolute positioning from left edge of page. However, when using this menu sample over a centered image (see LWD menu above) you need to center the main table that holds the menu text and make it the same width as the image (the image can be set to load in the css file). Also if you have regular links set for visited or bold or another font family or anything else not specified in css then you also need to add them to the drop down CSS as it will inherit those specifications. Check different screen resolutions to make sure this drop down menu is working correctly.

Besides the two sites mentioned above you can also see this menu working on the following sites:

Jagbits - Jaguar Parts
Kuefler Lighting Protection Systems
Bibleline Radio Pastor Don Rhoads
TIS Books - Treasury Information Services Books

Indent Individual Menu Items on Mouseover with CSS

The following animation shows a menu item being indented on mouseover with CSS as installed on AntiAging Research

The following CSS code will move the menu item over 15 pixels on mouseover. Enclose your menu code with a div with class="menu" and put the following in your CSS file:

.menu a:link { color:#000000;
text-decoration: none;
margin-left:0px;
font-family: 'Arial Narrow', Helvetica, sans-serif; }
.menu a:visited { color:#000000;
text-decoration: none;
margin-left:0px;
font-family: 'Arial Narrow', Helvetica, sans-serif; }
.menu a:hover { color:#cccccc;
text-decoration: none;
margin-left:15px;
font-family: 'Arial Narrow', Helvetica, sans-serif; }

Vertical Menu Samples in CSS

This vertical menu sample was designed in HTML and CSS in list format and uses images of Santa as buttons beside the link names (search engines cannot read images so the link name is needed along with the button).

Vertical Menu Samples in HTML,
CSS and Javascript

This vertical drop down menu is also from MyGoSuMenu (see above) using HTML, CSS and Javascript.

Vertical Menu Samples in CSS and HTML using Lists

This vertical menu sample on the left is designed as a list and works on all major browsers and produces a menu with graphic 3-D buttons which are controlled by CSS but the text is controlled by HTML. This enables the text to change color on mouseover and floats over the buttons so search engines can read the text (they can't read text on images). There is actually only one button loading multiple times and thus you can change the style or color of the button without having to change the text.

You can control the vertical spacing between menu links with CSS by setting up a class for the menu links and specifying line height as shown below. See the source code on this page for the list formatting with CSS and how to load the button image.

.menu a:link {color: #000000;
font-weight: bold;
background: transparent;
line-height:1.5em;
text-decoration: none;
font-size:11px; }

The above CSS vertical menu sample was written by Michael Meadhra
in an article called, Create Hybrid Graphical CSS buttons.

Horizontal Menu Sample in HTML and CSS

Horizontal Menus should only be applied to a website with about 2 rows of links or it will take up too much space. Following is a horizontal menu sample designed with HTML and CSS to control mouseover colors.

Home | Website Redesign Service | Web Design Portfolio Website Evaluations

See Horizontal Menu Code

HTML Vertical Menu Sample in List Format

The following vertical menu is designed in a simple list format using HTML.

CSS is not needed unless you want color changes on mouseover.

See List Menu Code

See other menu samples, designed with or without CSS,
in the Web Design Portfolio

Other Menu Samples

Accessible Website Menu: Ultimate Drop Down Menu

Here is an color coded, updated CSS support chart CSS Browser Support which
compares several Mac and Windows browsers support of CSS including IE, Netscape and Opera.

Menu Samples of Vertical Drop Down Menus and Horizontal Drop Down Menus