Copy & paste the following code into a new, blank HTML document. For expediency, I embedded CSS code here.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Menu Test</title>
<style type="text/css">
/* BEGIN HORIZONTAL DROP-MENU */
#navbar{
position:relative;
width: 100%;
margin: 0 0 0 45px; /**adjust as needed**/
padding:0;
text-align:center;
}
#navbar li {
list-style: none;
font-size: 12px;
float: left;
text-align:center;
}
/**top level menu**/
#navbar li a {
display: block;
text-decoration: none;
margin-right: 12px; /* space between links */
color: #FFF;
width: 9em; /* adjust as needed or use auto */
padding: 8px;
font-weight:bold;
line-height: 1.50em;
background: #C33;
background: -moz-linear-gradient(#C33, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #C33));
background: -webkit-linear-gradient(#C33, #111);
background: -o-linear-gradient(#C33, #111);
background: -ms-linear-gradient(#C33, #111);
background: linear-gradient(#C33, #111);
/* gradient filters for IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C33333', endColorstr='#111111',GradientType=0 );
/**rounded borders**/
-moz-border-radius: 25px;
-webkit-border-radius:25px;
border-radius: 25px;
}
/**top menu style on mouse over - in good browsers**/
#navbar li:hover > a {
color: #FFF;
background: #333;
background: -moz-linear-gradient(#333, #EAEAEA);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #EAEAEA),color-stop(1, #333));
background: -webkit-linear-gradient(#333, #EAEAEA);
background: -o-linear-gradient(#333, #EAEAEA);
background: -ms-linear-gradient(#333, #EAEAEA);
background: linear-gradient(#333, #EAEAEA);
/* gradient filters for IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#EAEAEA',GradientType=0 )
}
/**sub-menu**/
#navbar li ul {
display: none;
text-align:center;
margin:0;
padding:0 1em;
background:none;
}
/**sub-menu, help for IE6**/
#navbar li:hover ul,
#navbar li.hover ul {
display: block;
position: absolute;
padding: 0;
}
#navbar li:hover li,
#navbar li.hover li {
float: left;}
/**drop-menu style**/
#navbar li:hover li a,
#navbar li.hover li a {
color: #0D207D;
width: auto; /* adjust width as needed or use auto */
background: none;
filter:none;
}
/**drop-menu style on mouse over**/
#navbar li li a:hover {
color: #990000;
text-decoration:underline;
}
/* Clear floated elements at the end*/
#navbar:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
/**end Horizontal drop-menus**/
</style>
</head>
<body>
<ul id="navbar">
<li><a class="first" href="#">ABOUT US ▼</a>
<ul>
<li><a href="#">Videos</a></li>
<li><a href="#">Newsletter</a></li></ul>
</li>
<li><a href="#">PRODUCTS ▼</a>
<ul>
<li><a href="#">Broken Glass</a></li>
<li><a href="#">Mosaic Tiles</a></li>
<li><a href="#">Adhesives</a></li>
<li><a href="#">Grout</a></li></ul>
</li>
<li><a href="#">ACCESSORIES ▼</a><ul>
<li><a href="#">Gloves</a></li>
<li><a href="#">Rubber Mallets</a></li>
<li><a href="#">Sponges</a></li>
<li><a href="#">Safety Glasses</a></li></ul>
</li>
<li><a href="#">CONTACT</a></li>
</ul>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
