Simple Horizontal Menus

     Concepts, ideas, tools, and knowledge

• Lesson 1
• Lesson 2
• More Menus
• A Contact Page

<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;
z-index: 1;
position: absolute;
left: 10px;
background-color: #cc3300;
/* changed the width to accomodate horizontal links */
width: 700px;
top: 125px;
}

/* this make the unordered list  horizontal */
#navigation li  {display: inline;
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;

}