Have a look at the following. Just copy and paste in a new document and view it in the browser of choice.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Shannon Ryan - Harpist, Songstress, Healing Arts Practitioner</title>
<meta name="Keywords" content="harpist, songstress, healing, arts, practitioner, healing arts, shannon ryan, shannon, ryan, energy medicine, healer, harp">
<meta name="Description" content="Shannon Ryan is a Harpist, Songstress and Healing Arts Practitioner working in Port Townsend Washington">
<link href="http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
body {
width: 950px;
margin: auto;
color: #666;
font: 14px Arial, Helvetica, sans-serif;
}
#header {
height: 632px;
background: url(http://www.sarahpellerdesign.com/shannon/images/homepage4.jpg) no-repeat left top;
}
#header h1 {
color: transparent;
}
#nav {
height: 25px;
background: #8CDBC3 url(http://www.sarahpellerdesign.com/shannon/images/menu.gif) left 30px;
}
#nav ul.MenuBarHorizontal {
font: 90% Verdana, Geneva, sans-serif;
}
#nav ul.MenuBarHorizontal li {
width: auto;
}
#nav ul.MenuBarHorizontal ul {
width: auto;
}
#nav ul.MenuBarHorizontal ul li {
display: block;
float: none;
width: auto;
white-space: nowrap;
border-bottom: solid 1px #EEE;
}
#nav ul.MenuBarHorizontal a {
background-color: transparent;
color: #FFF;
padding: 0.5em 2.5em;
}
#nav ul.MenuBarHorizontal ul a {
background-color: #8cdbc3;
}
#nav ul.MenuBarHorizontal a.MenuBarItemSubmenu,
#nav ul.MenuBarHorizontal ul a.MenuBarItemSubmenu,
#nav ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,
#nav ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
background-image: none;
}
@media screen, projection {
#nav ul.MenuBarHorizontal li.MenuBarItemIE {
background: transparent;
}
}
#nav ul.MenuBarHorizontal ul.music {
margin-top: -235px;
}
#nav ul.MenuBarHorizontal ul.medicine {
margin-top: -265px;
}
#article {
padding: 20px;
min-height: 250px;
}
#footer {
height: 30px;
background-image: url(http://www.sarahpellerdesign.com/shannon/images/menu.gif);
font-size: 0.85em;
padding: 5px 20px;
}
</style>
</head>
<body>
<div id="header">
<h1>Shannon Ryan - Healing Arts Practioner, Harpist, Songstress</h1> <!-- Important for Search Engines and Accessibility -->
</div>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Contact</a> </li>
<li><a href="#">Biography</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Music</a>
<ul class="music">
<li><a href="#">Therapeutic Harp</a></li>
<li><a href="#">Wedding Harpist</a></li>
<li><a href="#">Ceremonial Music</a></li>
<li><a href="#">Sound Healing</a></li>
<li><a href="#">Recordings</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">Energy Medicine</a>
<ul class="medicine">
<li><a href="#">The Invitation</a></li>
<li><a href="#">Integrative Energy Medicine</a></li>
<li><a href="#">Qigong</a></li>
<li><a href="#">Reiki</a></li>
<li><a href="#">Long Distance Healing</a></li>
<li><a href="#">Sound Healing</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</li>
<li><a href="#">Yoga</a></li>
<li><a href="#">Massage</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</div>
<div id="article">
<p>Content goes here </p>
</div>
<div id="footer">
<p>this is the footer</p>
</div>
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryMenuBar.js"></script>
<script>
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Gramps
