Html 带有折叠菜单栏的响应式导航菜单

我开发了一个具有响应性的导航菜单。我如何使菜单在屏幕分辨率最高480px的情况下不相互堆叠，而是隐藏并显示如下所示：

HTML代码：

<div id='cssmenu'>

<div class="logo">
    <a href="http://www.google.com"><img src="http://img1.wikia.nocookie.net/__cb20100606210319/grooveshark/images/c/c2/Logo_Horizontal.jpg" alt="logo" /></a>
</div>

  <ul>
     <li class='active'><a href='index.html'>Home</a></li>
     <li class='has-sub '><a href='#'>Products</a>
        <ul>
           <li class='has-sub '><a href='#'>Product 1</a>
              <ul>
                 <li><a href='#'>Sub Item</a></li>
                 <li><a href='#'>Sub Item</a></li>
              </ul>
           </li>
           <li class='has-sub '><a href='#'>Product 2</a>
              <ul>
                 <li><a href='#'>Sub Item</a></li>
                 <li><a href='#'>Sub Item</a></li>
              </ul>
           </li>
        </ul>
     </li>
     <li><a href='#'>About</a></li>
     <li><a href='#'>Contact</a></li>
  </ul>
</div>

---

在这里你还可以找到一把小提琴：

我基本上是做的​​平均查询更改480px

请参阅此JSFIDLE：

如果不是你所期望的。问候

@Media screen and (max-width:480px) {  
    #cssmenu *:not{ float :left !important; width: 100%;padding-left: 0px !important; padding-right: 0px !important;}
    .logo{margin:0;padding:0}
    #cssmenu .logo > a{margin:0;padding:0}
#cssmenu ul li {    display: block ;    width: 100% ;  text-align:center; } 
#cssmenu > ul > li > a { line-height: 60px;  }
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
width: 100%;
/* float: left; */
}
#cssmenu ul ul ul {display:none;}
#cssmenu .has-sub:hover > ul {
border-top: 0 none;
visibility:visible;
display: block;
float: left;
clear: both;
position:relative;
right: 0;
}
        #cssmenu ul li.hover, #cssmenu ul li:hover{
            display:inline-block;
        }
.content1{font-size:100%;}
}

---

这并不是如上面的线框所示显示菜单。

@Media screen and (max-width:480px) {  
    #cssmenu *:not{ float :left !important; width: 100%;padding-left: 0px !important; padding-right: 0px !important;}
    .logo{margin:0;padding:0}
    #cssmenu .logo > a{margin:0;padding:0}
#cssmenu ul li {    display: block ;    width: 100% ;  text-align:center; } 
#cssmenu > ul > li > a { line-height: 60px;  }
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
width: 100%;
/* float: left; */
}
#cssmenu ul ul ul {display:none;}
#cssmenu .has-sub:hover > ul {
border-top: 0 none;
visibility:visible;
display: block;
float: left;
clear: both;
position:relative;
right: 0;
}
        #cssmenu ul li.hover, #cssmenu ul li:hover{
            display:inline-block;
        }
.content1{font-size:100%;}
}