Responsive Menu

Insert in header for fast structure load

All other styles should be inserted in the footer and even better loaded from their own document

Responsive menu

<div class="seo4menu mobilenone">
      <ul class="seo4list">
        <li class="seo4item">MENU ITEM #1</li>
        <li class="seo4item">MENU ITEM #2</li>
        <li class="seo4item last">MENU ITEM #2</li>
      </ul>
	</div>
<br/>
<div class="seo4submenu mobileonly">
<div class="seo4menu_fold mobileonly">
      <ul class="seo4list">
        <li class="seo4item">MENU ITEM #1</li>
        <li class="seo4item">MENU ITEM #1</li>
        <li class="seo4item last">MENU ITEM #2</li>
      </ul>
</div>
  <div class="seo4button">MENU</div>
</div>

CSS

.seo4menu {background:#ddd; text-align: right;}
.seo4submenu {background:; text-align: left; float: left; position: absolute; bottom:10px;}
.seo4button {color: #000; background: #ff0000; display:inline-block; padding:10px; border-radius:5px;}
.seo4menu_fold {background: #333; padding: 3px; display: block; margin-bottom:5px;}
.seo4list {list-style-type: none; padding:0;margin:0;}
.seo4item {background:#666; display:inline-block; margin:0px; padding:10px;}
.mobileonly .seo4item {background:#666; display: block; margin-bottom:0; padding:10px; border-bottom: 2px solid #000;}
.seo4item.last{border:0;}
.seo4item, .seo4item a {color:#ddd;}
.mobilenone