How to Set Up Simple Vertical Horizontal Drop Down Menus
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.
Small Horizontal Menu HTML:
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="stuff.html">Stuff</a> |
<a href="contact.html">Contact</a> |
</p>
Small Horizontal Menu CSS :
background: transparent;
text-decoration: underline;
font-size:100%; }
a:hover {color: #7c5ce6;}
Vertical List 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.
Vertical List Menu CSS:
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="stuff.html">Stuff</a></li>
<li><a href="contact.html">Contact</a></li>
<li></p>
Vertical List Menu HTML:
font-weight: bold;
background: transparent;
line-height:1.5em;
text-decoration: none;
font-size:11px; }
a:hover {color: #999;}
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 on mobile
Horizontal Drop Down menu
See other menu ideas, designed with or without CSS,
in the Responsive Web Design Portfolio
Copyright © 2004, updated 11-04-20
All Rights Reserved