Simple Vertical Menus

     Concepts, ideas, tools, and knowledge

• A Menu List
• Horizontal Menus
• Vertical Menus
• Better Horizontal Menus
• Better Vertical Menus
• Tools to make menus

<div id="navigation">
<ul>
<li><a href="lesson1.html">Lesson 1</a></li>
<li><a href="lesson02.html">Lesson 2</a></li>
<li><a href="BasicCSS/nav-vert-hor-1.html">More Menus</a></li>
<li><a href="Formstest/about.html">A Contact Page </a></li>

</ul>
 </div>

The source -- the CSS is commented. Try the menus they work

/* Styling the links */
#navigation {
border: 4pt solid white;
padding: 10px;

background-color: #cc3300;
/* width to accomodate text below the links */
width: 600px;
top: 125px;
}

/* this make the unordered list  horizontal, it also make the entire "box" a link, not just the text!*/
#navigation li  {display: block;
/* this is the width of the menus */
width:200px;
padding: 8px;
/* adds a double outlined box around the links */
border: double 4px green;}

/* we want to style each state of the link differently normal a:link a:visited a:hover */

a:link {
/* takes out the underline */
text-decoration: none;
/* make the font white */
color: white;
/* bolder font */
font-family:"Arial Black";
font-weight: bolder;
}
a:visited {/* adds in underline */
text-decoration: underline;
/* make the font purple */
color: purple;
/* bolder font */
font-family:"Arial Black";
font-weight: bolder;

}
a:hover {/* adds in underline */
text-decoration: underline;
/* make the font blue */
color: blue;
/* bolder font */
font-family:"Arial Black";
font-weight: bolder;
font-style: italic;

}