How to Set Up Simple Vertical Horizontal Drop Down Menus

Following are several samples of vertical and horizontal menus in both simple and list format as well as a drop down arrangement designed in JavaScript, CSS and HTML.

Simple Horizontal Menu Sample

Horizontal Menus should only be applied to a website with a few links and no drop downs. Following is a simple horizontal menu sample designed with HTML and CSS to control mouseover colors. You can change the link colors replacing the code for color in each one and adjust the font size, and if you don't want an underline just replace it with "normal". You can then copy the code below into your files.

horizontal menu sample

Vertical List Menu Sample

vertical menu sample

Vertical list menus are usually not suitable for small mobile devices because they take up valuable space either on left or right side of the page usually within a side bar. However you can use short menus within your content area. The link colors, mouseover colors and line height are controlled by CSS.


Horizontal Drop Down Menu in CSS, HTML and Javascript

When you have a lot of pages then a menu with drop downs will be needed. The horizontal drop down menu, shown below is from Responsive Slides, which uses CSS, Javascript and HTML. This menu displays correctly on all Major browsers and is suitable for mobile devices as it shrinks according to the width of the page. When the page gets down to 600 pixels or less then the menu switches to a menu icon which causes a vertical menu to come up that over lays the content on the page until a link is clicked. You need to be very experienced in using CSS and media queries to set this up. It is the one used on Lori's Web Design (see top of page).

horizontal Drop Down menu for mobile
Horizontal Drop Down on mobile

horizontal Drop Down menu sample
Horizontal Drop Down menu


order an Seo Analysis Report

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

Lori Eldridge
Copyright © 2004, updated 1-12-19
All Rights Reserved