title: Prevent wrapping of menu items
body: <p>I created a horizontal navigation (menu) bar for my site. When I re-size my window to a size smaller than that of the bar, the menu items get wrapped. I want the menu to remain intact (that is, it should remain horizontal) irrespective of the size of window as it usually can be seen in sites such as Google. I tried various ways posted on various forums including this one but nothing worked for me. Below I have pasted my CSS code for the menu.</p>
  
  <pre><code>CSS CODE:
  
  #cssmenu ul { margin: 0; padding: 0;}
  #cssmenu li { margin: 0; padding: 0;}
  #cssmenu a { margin: 0; padding: 0;}
  #cssmenu ul {list-style: none;}
  #cssmenu a {text-decoration: none;}
  #cssmenu {height: 70px; background-color: #6699CC; box-shadow: 0px 2px 3px rgba(0,0,0,.4); }
  
  
  #cssmenu &gt; ul &gt; li {
      float: left; 
      margin-left: 30px;
      position: relative;
  
  }
  
  #cssmenu &gt; ul &gt; li &gt; a {
      color: #FFFFFF;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 18px;
      line-height: 70px;
      padding: 15px 20px;
  -webkit-transition: color .15s;
     -moz-transition: color .15s;
       -o-transition: color .15s;
          transition: color .15s;
  
  }
  
  #cssmenu &gt; ul &gt; li &gt; a:hover {color: #00FF00; }
  body.home li.home, body.tech li.tech {font-weight:bold; }
  
  #cssmenu &gt; ul &gt; li &gt; ul {
      opacity: 0;
      visibility: hidden;
      padding: 16px 0 20px 0;
      background-color: #FFFFFF;
      text-align: left;
      position: absolute;
      top: 55px;
      left: 50%;
      margin-left: -90px;
      width: 180px;
  -webkit-transition: all .3s .1s;
     -moz-transition: all .3s .1s;
       -o-transition: all .3s .1s;
          transition: all .3s .1s;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
          box-shadow: 0px 1px 3px rgba(0,0,0,.4);
  }
  
  #cssmenu &gt; ul &gt; li:hover &gt; ul {
      opacity: 1;
      top: 65px;
      visibility: visible;
  }
  
  #cssmenu &gt; ul &gt; li &gt; ul:before{
      content: '';
      display: block;
      border-color: transparent transparent rgb(250,250,250) transparent;
      border-style: solid;
      border-width: 10px;
      position: absolute;
      top: -20px;
      left: 50%;
      margin-left: -10px;
  }
  
  #cssmenu &gt; ul ul &gt; li { position: relative;}
  
  #cssmenu ul ul a{
      color: rgb(50,50,50);
      font-family: Verdana, 'Lucida Grande';
      font-size: 13px;
      background-color: rgb(250,250,250);
      padding: 5px 8px 7px 16px;
      display: block;
  -webkit-transition: background-color .1s;
     -moz-transition: background-color .1s;
       -o-transition: background-color .1s;
          transition: background-color .1s;
  }
  
  #cssmenu ul ul a:hover {background-color: rgb(240,240,240);}
  
  #cssmenu ul ul ul {
      visibility: hidden;
      opacity: 0;
      position: absolute;
      top: -16px;
      left: 206px;
      padding: 16px 0 20px 0;
      background-color: rgb(250,250,250);
      text-align: left;
      width: 160px;
  -webkit-transition: all .3s;
     -moz-transition: all .3s;
       -o-transition: all .3s;
          transition: all .3s;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
          box-shadow: 0px 1px 3px rgba(0,0,0,.4);
  }
  
  
  #cssmenu ul ul &gt; li:hover &gt; ul { opacity: 1; left: 196px; visibility: visible;}
  
  
  #cssmenu ul ul a:hover{
      background-color: rgb(205,44,36);
      color: rgb(240,240,240);
  }
  </code></pre>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;head&gt;
   &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
   &lt;link href="styles.css" rel="stylesheet" type="text/css"&gt;
   &lt;title&gt;Home&lt;/title&gt;
  &lt;/head&gt;
  &lt;body class="home" background="teenscorner1.jpg" text="#FFFFFF" style="background-attachment: fixed"&gt;
   &lt;div id='cssmenu'&gt;
    &lt;ul&gt;
     &lt;li class="home"&gt;&lt;a href='home.jsp'&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li class="tech"&gt;&lt;a href='tech.jsp'&gt;&lt;span&gt;Tech Specs&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Fun&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Deals&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Wheelz&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>