Hi there mlegg,
here is my take on your navigation problem...
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>>HamptonSunrise.com brought to you by Samonas Realty</title>
<link rel="stylesheet" href="/">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400">
<style>
body {
margin:0;
background-image:url(http://andrewsamonas.com/images/beach.jpg);
font-family:'Open Sans',sans-serif;
font-size:100%;
color:#036;
}
a {
text-decoration:none;
}
#container {
width:90%;
margin:auto;
background-color:#fff;
}
#logo {
display:block;
width:100%;
}
#nav,#nav ul {
padding:0;
margin:0;
list-style-type:none;
border-top:1px solid #cc470d;
border-bottom:1px solid #cc470d;
background-color:#e15a1f;
}
#nav:after{
content:'';
display:block;
clear:both;
border-bottom:1px solid #cc470d;
}
#nav {
box-shadow:0 0.4em 0.4em #999;
}
#nav ul {
box-shadow:0.4em 0.4em 0.4em #999;
}
#nav li {
position:relative;
float:left;
width:14.285%;
}
#nav a {
display:block;
line-height:2.5em;
border-right:1px solid #cc470d;
font-size:1.5em;
color:#fff;
text-align:center;
}
#nav li:last-of-type a {
border:0;
}
#nav a span {
line-height:60%;
margin-left:0.5em;
font-size:60%;
color:#efa585;
}
#nav a:hover {
background-color:#cc470d;
}
#nav ul {
display:none;
min-width:100%;
position:absolute;
height:auto;
white-space:nowrap;
}
#nav ul li {
float:none;
width:auto;
}
#nav ul a {
padding:0 0.5em;
}
#nav li:hover ul {
display:block;
}
#content {
clear:both;
padding:1em 5%;
}
h2 {
text-align:center;
}
@media screen and (max-width:920px) {
body {
font-size:90%;
}
#nav li {
height:90%;
}
}
@media screen and (max-width:820px) {
body {
font-size:80%;
}
#nav li {
height:80%;
}
}
@media screen and (max-width:740px) {
body {
font-size:70%;
}
#nav li{
height:70%;
}
}
@media screen and (max-width:660px) {
body {
font-size:60%;
}
#nav li {
height:60%;
}
}
@media screen and (max-width:570px) {
#nav ul {
position:static;
border:0;
box-shadow:none;
}
#nav li {
float:none;
width:100%;
}
#nav a,#nav ul a{
text-align:left;
padding:0 0 0 1em;
}
}
</style>
</head>
<body>
<div id="container">
<img id="logo" src="http://andrewsamonas.com/images/HamptonSunrise_logo.jpg" alt="Hampton Sunrise logo">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Units<span>▼</span></a>
<ul>
<li><a href="upper.html" title="Upper Level">Upper Level</a></li>
<li><a href="lower.html" title="Lower Level">Lower Level</a></li>
</ul></li>
<li><a href="slideshow.html" title="Lower Level">Slideshow</a></li>
<li><a href="about.html" title="About">About</a></li>
<li><a href="rate.html" title="Rates">Rates</a></li>
<li><a href="map.html" title="Map">Map</a></li>
<li><a href="contact.html" title="Contact">Contact</a></li>
</ul>
<div id="content">
<h2>Wake up every morning to the gorgeous Hampton Beach sunrise!</h2>
<p>
Quietest Section of Hampton Beach in the sought after Island Section just steps to a beautiful, sandy beach.
One of the few areas of Hampton Beach where you don't have to cross Rt. 1A to get to the beach. Views of the
Ocean, Dunes, and River.
</p><p>
Available the weeks of Aug 18 through Aug 25 and Aug 25 through Sept 1 which would include Labor Day.
</p><p>
If you are ready for the vacation of your life, then call us now before we are all booked!
</p><p>
You will want to come back to stay at Hampton Sunrise again and again to add to your lifetime of memories.
</p><p>
Where else along the Seacoast can you find 80 free evening concerts taking place throughout the summer and
fantastic fireworks displays every week? Where else can you spend a spectacular summer day on the sands,
sandwiched between refreshing Atlantic surf and row after row of accommodations, amusements, boating adventures,
restaurants, and shops?
</p><p>
Only at Hampton Beach, a great beach and a whole lot more!
<a href="http://www.hamptonbeach.org/" target="blank"><sub>1</sub></a>
</p><p>
Going to the beach? View the
<a href="http://nhstateparks.org/explore/visiting/beach-conditions.aspx" target="blank">daily beach report</a>
starting in July!
</p><p>
<a href="http://www.hamptonbeach.org/webcam.cfm">Watch the LIVE Hampton Beach webcam!</a>
</p><p>
No one can deny that Hampton Beach is a great beach and a whole lot more.
</p><p>
From fantastic fireworks every week, 16 in all, to 80 free summer concerts, Hampton Beach has something for
everyone. Come marvel at the Masters of Sand Sculpting in June, find out who will be Miss Hampton Beach 2014
in July, show off your talent at the annual Hampton Beach Talent competition, or feel like a kid again in August
and join us to see off the end of the season with our famous Seafood Festival in September. But please, don't sit
around waiting for these and other special events!
</p><p>
Because everyone knows that any day of the week Hampton Beach is a great beach and a whole lot more!
<a href="http://www.hamptonbeach.org/annual-events.cfm" target="blank"><sub>2</sub></a>
</p>
</div><!--end #content-->
</div><!--end #container-->
</body>
</html>
coothead
