javascript - float's not returing to position after mobile view end -

on menu when in mobile view not float correct.

problem being when come out of mobile view class "menu-right" floats left until reload page.

is possible when comes out of mobile view "menu-right" class automatically go float right out me reloading page.

i not sure if it's css or java script.

live code example: http://codepen.io/riwakawebsitedesigns/pen/ggljml

live code full view: http://codepen.io/riwakawebsitedesigns/full/ggljml/

java script

var ww = document.body.clientwidth;  $(document).ready(function() {     $("#menu li a").each(function() {         if ($(this).next().length > 0) {             $(this).addclass("parent");         };     })      $(".menu-toggle").click(function(e) {         e.preventdefault();         $(this).toggleclass("menu-button");         $("#menu").toggle();     });     adjustmenu(); })  $(window).bind('resize orientationchange', function() {     ww = document.body.clientwidth;     adjustmenu(); });  var adjustmenu = function() {     if (ww < 768) {         $(".menu-toggle").css("display", "inline-block");         if (!$(".menu-toggle").hasclass("menu-button")) {             $("#menu").hide();         } else {             $("#menu").show();         }         $("#menu li").unbind('mouseenter mouseleave');         $("#menu li a.parent").unbind('hover').bind('hover', function(e) {             // must attached anchor element prevent bubbling             e.preventdefault();             $(this).parent("li").toggleclass("hover");         });          $(".menu-right").removeclass("menu-right");     }      else if (ww >= 768) {         $(".menu-toggle").css("display", "none");         $("#menu").show();         $("#menu li").removeclass("hover");         $("#menu li a").unbind('hover');         $("#menu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {             // must attached li mouseleave not triggered when hover on submenu             $(this).toggleclass('hover');         });         $(".menu-right").addclass("menu-right");     } } 

css

body {     background-color: #f5f5f5;   font-family: "helvetica neue", helvetica, arial, sans-serif;  }  #content {     margin-top: 20px; }  .default-theme {     background-color: #fafafa !important;     background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2) !important;     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2)) !important;     background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2) !important;     background-image: -o-linear-gradient(top, #ffffff, #f2f2f2) !important;     background-image: linear-gradient(to bottom, #ffffff, #f2f2f2) !important;     background-repeat: repeat-x;     border: 1px solid #d4d4d4;     -webkit-border-radius: 4px;     -moz-border-radius: 4px;     border-radius: 0px;     filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ffffffff', endcolorstr='#fff2f2f2', gradienttype=0);     *zoom: 1;     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065) !important;     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065) !important;     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065) !important; }  body,  #menu,  ul,  li,   {     margin: 0;      padding: 0; }  a,  a:visited {     color: #003366;     text-decoration: none;     cursor: pointer; }  #header .div1 {     height: 56px;     padding: 0px 30px;     background: url('../img/header.png') repeat-x;     min-width: 900px; } #header .div2 {     color: #ffffff;     padding: 18px 0px 0px 0px;     float: left; } #header .div3 {     font-family: arial, helvetica, sans-serif;     font-size: 12px;     color: #fff;     text-align: right;     padding: 15px 0px 0px 0px;     float: right; } #header .div2 span {     font-weight: bold; }  .container-menu {     width: 100%;     margin: 0 auto; }  .menu-right {   float:right !important; }  .menu-toggle {     display:  none; }  #menu {     list-style: none;     *zoom: 1;     background: rgba(0,0,0,1);     background: rgba(19,19,19,1);     background: -moz-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);     background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,19,19,1)), color-stop(0%, rgba(17,17,17,1)), color-stop(0%, rgba(102,102,102,1)), color-stop(0%, rgba(43,43,43,1)), color-stop(2%, rgba(44,44,44,1)), color-stop(4%, rgba(71,71,71,1)), color-stop(27%, rgba(61,61,61,1)), color-stop(100%, rgba(28,28,28,1)));     background: -webkit-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);     background: -o-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);     background: -ms-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);     background: linear-gradient(to bottom, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#131313', endcolorstr='#1c1c1c', gradienttype=0 ); }  #menu:before, #menu:after {     content: " ";      display: table;  }  #menu:after {     clear: both; }  #menu ul {     list-style: none; }  #menu {     padding: 10px 15px;     color:#fff;     text-decoration: none }  #menu li {     position: relative; }  #menu > li {     float: left; }  #menu > li > {     display: block; }  #menu li  ul {     position: absolute;     left: -9999px; }  #menu > li.hover > ul {     left: 0; } #menu li li.hover ul {     left: 100%;     top: 0; }  #menu ul .top {     background-image: url('../img/arrow-right.png');      background-position: 95% center;     background-repeat:no-repeat; }  #menu li li {     display: block;     background: #000000; /* grey background */     opacity: 0.7; /* 80% opacity */     position: relative;     z-index:100;     width: 147px; }   #menu li li li {     background: #000000; /* grey background */     opacity: 0.7; /* 80% opacity */     z-index:200; }  #menu li li li a:hover, #menu li li a:hover {     margin: 0px;     border: 1px solid #bd4c14;     background-color: #391706; }  @media screen , (max-width: 768px) {     #menu-header {     background: rgba(0,0,0,1);     background: rgba(19,19,19,1);     background: -moz-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);     background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,19,19,1)), color-stop(0%, rgba(17,17,17,1)), color-stop(0%, rgba(102,102,102,1)), color-stop(0%, rgba(43,43,43,1)), color-stop(2%, rgba(44,44,44,1)), color-stop(4%, rgba(71,71,71,1)), color-stop(27%, rgba(61,61,61,1)), color-stop(100%, rgba(28,28,28,1)));     background: -webkit-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);     background: -o-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);     background: -ms-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);     background: linear-gradient(to bottom, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#131313', endcolorstr='#1c1c1c', gradienttype=0 );     width: 100%;     padding-top: 2%;     }      #menu-header button {         color: #fff;         border-color: 1px solid #fff !important;         margin-bottom: 15px;         margin-left: 10px;     }      #menu {         background: #000000 !important;         clear: both;     }      #menu > li {         float: none;     }      #menu li li {         width: 100%;     }      #menu ul {         display: block;         width: 100%;     }     #menu > li.hover > ul , #menu li li.hover ul {         position: static;     } } 

html

<div class="container-menu"> <div id="menu-header">     <button type="button" class="menu-toggle btn btn-primary">         menu     </button> </div> <ul id="menu">     <li><a href="">dashboard</a></li>     <li><a href="#">catalog</a>         <ul>             <li><a href="">categories</a></li>             <li><a href="">categories</a></li>         </ul>     </li>     <li><a href="#">extensions</a>         <ul>             <li><a href="">modules</a></li>         </ul>     </li>     <li><a href="#">sales</a>         <ul>             <li><a href="#" class="top">customers</a>                 <ul>                     <li><a href="#">customers</a></li>                     <li><a href="#">customer group</a></li>                 </ul>             </li>         </ul>     </li>     <li><a href="#">system</a>         <ul>             <li><a href="">setting</a></li>             <li><a href="#" class="top">design</a>                 <ul>                     <li><a href="#">layouts</a></li>                     <li><a href="#">banners</a></li>                 </ul>             </li>             <li><a href="#" class="top">users</a>                 <ul>                     <li><a href="#">user</a></li>                     <li><a href="#">user group</a></li>                 </ul>             </li>         </ul>     </li>     <li class="menu-right"><a href="">logout</a></li>     <li class="menu-right"><a href="">website front</a></li> </ul> </div> 

you have create media screen like:

@media screen , (min-width: 769px) {}

and reset style changed with:

@media screen , (max-width: 768px) {}

@media (min-width: 769px) {  	h1 {color: red;}  }    @media (max-width: 768px) {  	h1 {color: green;}  }

<html>  <head>  </head>  <body>  	<h1>color</h1>    <script>  	  </script>  </body>  </html>