I tried the changes and uploaded it here http://ahepa215.org/template.html
When a browser is full width, the menu goes all the way to the right past the banner width and container width. Also when you mouse over or hover over ABOUT the sub-menus (Chapter# 215 and AHEPA) don't show up
HTML
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<META NAME="description" Content="AMERICAN HELLENIC EDUCATIONAL PROGRESSIVE ASSOCIATION Chapter 215. The Portsmouth Chapter #215 of the Order of AHEPA was founded on March 21, 1929, at which time the first meeting was held. On March 24, 1929 thirty four residents of Portsmouth and Dover were initiated into the Order. We are a part of the District Lodge 9 that encompasses the Maine, New Hampshire and Vermont AHEPA chapters.">
<META NAME="keywords" Content="AMERICAN HELLENIC EDUCATIONAL PROGRESSIVE ASSOCIATION, Chapter 215, Portsmouth NH, Portsmouth, NH, Maine, ME, New Hamptshire, Vermonth, VT, EVENTS, NEWS, PROGRAMS, ISSUES, EDUCATIONAL FOUNDATION, CONTACTS">
<title>AHEPA215.org Portsmouth NH Chapter #215 of the Order of AHEPA</title>
<link rel="stylesheet" href="style.css">
<LINK REL="SHORTCUT ICON" HREF="images/favicon.ico">
</head>
<body>
<div id="container">
<img id="logo" src="images/Ahepa215-banner.jpg" alt="AHEPA 215 logo">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li>
<a href="#">About</a>
<ul class="hidden">
<li><a href="chapter215.html">Chapter # 215</a></li>
<li><a href="ahepa.html">AHEPA</a></li>
</ul>
</li>
<li><a href="brothers.html">Brothers</a></li>
<li><a href="scholarships.html">Scholarships</a></li>
<li><a href="join.html">Join</a></li>
<li><a href="calendar.html">Calendar</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div id="content">
<h1>Contact</h1>
<p>Thank you for contacting AHEPA! Please do not send important business correspondence via email. Unless otherwise instructed, please send all business correspondence directly to our postal address.</p>
<div class="columns">
<div class="left"><h3>AHEPA 215</h3>
<p>AHEPA 215 c/o St. Nicholas Greek Orthodox Church</p>
<p>40 Andrew Jarvis Drive</p>
<p>Portsmouth, NH 03801, USA</p>
<p>Phone: (603) 436-2733</p>
<p>Fax: (603) 436-2943</p>
<p>Email: <a href="mailto:ahepa215@gmail.com">ahepa215@gmail.com</a></p>
<h3>Technical Concerns</h3>
<p>If you are experiencing technical difficulty with this website, have
Internet related questions or comments, or wish to advertise on AHEPA215.org,
please contact our <a href="mailto:mlegg10@gmail.com?subject=AHEPA">webmaster</a>.</p>
</div>
<div class="right">
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2915.1776786379487!2d-70.76877209999999!3d43.058730499999996!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e2bf80ef55ff4f%3A0xa4ccf752ddfbeb4c!2s40+Andrew+Jarvis+Dr%2C+Portsmouth%2C+NH+03801!5e0!3m2!1sen!2sus!4v1410903567876" width="300" height="250" frameborder="0" style="border:0"></iframe>
</div></div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div id="footer">Copyright © <a href="http://Ahepa215.org">Ahepa 215</a> ~ <a href="mailto:ahepa215@gmail.com">ahepa215@gmail.com</a></div>
</body></html>
CSS
Code:
body {
width:100%;
margin:0;
background-image:url(images/greekkey2.gif);
font-family:'Open Sans',sans-serif;
font-size:100%;
color:#036;
}
ul {
padding:0;
margin:0;
list-style-type:none;
}
a {
text-decoration:none;
}
#vlb1overlay {z-index:100 !important;}
#container {
width:90%;
margin:auto;
background-color:#fff;
}
#logo {
display:block;
width:100%;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
width:100%;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
width:14.125%;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #896DFA;
}
/*Style for dropdown links*/
li:hover ul a {
background: #896DFA;
color: #fff;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #036;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #036;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
#content {
clear:both;
position:relative;
padding:1.5em 5%;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #000;
}
h2 {
clear:both;
text-align:center;
}
audio {
visibility:hidden;
height:0;
width:0;
}
#pauseplay {
float:right;
width:32px;
height:32px;
cursor:pointer;
}
@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;
}
}
.innerBox {
background-color : #ffffff;
background-repeat : repeat-y;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
padding-bottom : 1em;
}
#left {
float: left;
width: 32%;
padding:5px;
}
#middle {
float: left;
width: 32%;
padding:5px;
}
#right {
float:left;
width:32%;
padding:5px;
}
.columns {
width:100%;
}
.left{
float:left;
width:40%;
}
.right {
margin-left:50%;
}
.clear {
clear:both;
}
.2columns {
width:100%;
}
.left{
float:left;
width:50%;
}
.right {
width::50%;
}
.clear {
clear:both;
}
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
#map {
height: 100%;
}
#footer {
background-color:rgba(58,162,173,1);
width:90%;
margin:auto;
text-align:center;
font-family:sans-serif;
font-size:80%;
color:#fff;
padding:0.5em 0;
}
#footer a {
color:#fff;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
menu not 100% width
Reply With Quote
Bookmarks