CSS3 menu media queries

Menu à plusieurs niveaux

by toubia95

HTML

<nav class="primary-navigation">  
        <ul>    
            <li><a>Item 1</a></li>    
            <li><a>Item 2</a></li>    
            <li><a>Item 3</a></li>      
            <ul>        
                <li><a>Sub 1</a></li>
                <li><a>Sub 2</a></li>
                <li><a>Sub 3</a></li>
                <li><a>Sub 4</a></li>
                <li><a>Sub 5</a></li>
            </ul>    
            <li><a>Item 4</a></li>    
            <li><a>Item 5</a></li>  
        </ul>
    </nav>

CSS

body {  
          margin: 0; padding: 0;
          font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
          font-size: 13px;
          }
      nav { 
          position: relative;
      }
      ul { 
          background: #DDD;  
          list-style-type: none; 
          padding-left: 10px; 
          text-transform: uppercase;    
          position: absolute;    
          left: 0;    
          right: 0;    
          /* position: static; */
      }
      ul li { 
          background: #CCC;    
          float: left;
          padding: 0 5px;     
          /* float: none;    
          padding: 0; */
      }
      ul ul { 
          background: #BBB; 
          text-transform: none;    
          position: absolute;    
          left: 0;    
          right: 0;    
          top: 16px;    
          /* position: static; */
      }
      ul ul li { 
          background: #AAA; 
      }
      
      @media screen and (max-width: 640px) {  
          ul, ul ul {    
              position: static;  
          }  
          ul li {    
              float: none;  
          }
      }