响应式导航菜单与折叠菜单栏

Question

我开发了一个响应式导航菜单。我怎样才能当它是在屏幕分辨率最高480像素不是在相互堆叠，但被隐藏起来，就像下图所示的菜单：

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> 

CSS：

/*Main Menu CSS*/ 
@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono); 
#cssmenu {padding: 0; margin: 0; border: 0;} 
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;} 
#cssmenu ul {position: relative; z-index: 597; } 
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;} 
#cssmenu ul li.hover, 
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;} 
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;} 
#cssmenu ul ul li {float: none;} 
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; } 
#cssmenu ul li:hover > ul { visibility: visible;} 
#cssmenu ul ul {bottom: 0; left: 0;} 
#cssmenu ul ul {margin-top: 0; } 
#cssmenu ul ul li {font-weight: normal;} 
#cssmenu a { display: block; line-height: 1em; text-decoration: none; } 

#cssmenu { 
    background: #333; 
    border-bottom: 4px solid #1b9bff; 
    font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; 
    font-size: 16px; 
} 

    #cssmenu > ul { *display: inline-block; } 

    #cssmenu:after, #cssmenu ul:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 

#cssmenu a { 
    background: #333; 
    color: #CBCBCB; 
    padding: 0 20px; 
} 
#cssmenu ul { text-transform: uppercase; } 

    #cssmenu ul ul { 
     border-top: 4px solid #1b9bff; 
     text-transform: none; 
     min-width: 190px; 
} 
     #cssmenu ul ul a { 
     background: #1b9bff; 
     color: #FFF; 
     border: 1px solid #0082e7; 
     border-top: 0 none; 
     line-height: 150%; 
     padding: 16px 20px; 
} 
     #cssmenu ul ul ul { border-top: 0 none; } 

     #cssmenu ul ul li { position: relative } 

#cssmenu > ul > li > a { line-height: 80px; } 

#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; } 
     #cssmenu ul ul li:hover > a { background: #35a6ff; } 

     #cssmenu ul ul li:last-child > a { 
      border-radius: 0 0 3px 3px; 
      box-shadow: 0 1px 0 #1b9bff; 
} 
     #cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; } 

     #cssmenu ul ul li.has-sub > a:after { 
      content: '+'; 
      position: absolute; 
      top: 50%; 
      right: 15px; 
      margin-top: -8px; 
} 

#cssmenu ul li:hover > a, #cssmenu ul li.active > a { 
     background: #1b9bff; 
     color: #FFF; 
} 
    #cssmenu ul li.has-sub > a:after { 
     content: '+'; 
     margin-left: 5px; 
} 
    #cssmenu ul li.last ul { 
     left: auto; 
     right: 0; 
} 
     #cssmenu ul li.last ul ul { 
     left: auto; 
     right: 99.5%; 
} 

.logo{ 
    margin-top:0px; 
    float:left; 
    margin-left:20%; 
    padding-right:10px; 
    } 

.logo img{ 
    width:200px; 
    height:66px; 

} 

@Media screen and (max-width:480px) { 

#cssmenu ul li {  display: block ; width: 100% ; text-align:center; } 
#cssmenu > ul > li > a { line-height: 60px; } 
.content1{font-size:100%;} 
} 
} 

@Media screen and (max-width:768px) { 
.logo{ margin-left:10%;} 
} 

在这里你还可以找到这样一个小提琴：http://jsfiddle.net/uA4fL/

Answer 1

我基本上做出的平均变化曲ERY 480像素，

看到这样的jsfiddle：http://jsfiddle.net/uA4fL/6/

，如果你希望不是。问候

@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%;} 
}