title: how to hide navigation menu list?
body: <p>i am doing website which i have drop down list like following image<img src="https://i.stack.imgur.com/a95XI.jpg" alt="enter image description here"></p>
  
  <p>it works fine, but  while my browser size decreasing that menu will fall down like following image<img src="https://i.stack.imgur.com/vPl8z.jpg" alt="enter image description here"></p>
  
  <p>here is my css code:</p>
  
  <pre><code>  nav ul ul {
  display: none;
          }
    nav ul li:hover &gt; ul {
      display: block;
  }
  nav ul {
  background: #efefef; 
  background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
  background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
  background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 20px;
  border-radius: 10px;  
  list-style: none;
  position: fixed;
  display: inline-table;
  overflow:hidden;
     }
    nav ul:after {
      content: ""; clear: both; display: block;
  
  }
  nav ul li {
  float: left;
  
      }
  nav ul li:hover {
      background: #4b545f;
      background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
      background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
      background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
  }
      nav ul li:hover a {
      color: #fff;
      }
  
   nav ul li a {
  display: block; padding: 25px 40px;
  color: #757575; text-decoration: none;
  }
  nav ul ul {
  background: #5f6975; border-radius: 0px; padding: 0;
  position: absolute; top: 100%;
     }
  </code></pre>
  
  <p>and here is my html code: </p>
  
  <pre><code>![enter image description here][3]
  </code></pre>