title: How to make fixed menu bar so that it doesn't move when resizing the browser window
body: <p>I would like to make my menu bar have a fixed positioning so that when the browser window is resized, the menu doesn't move. I also would it to work for all browsers. I have done a bit of answer browsing however the solutions i have seen doesn't seem to work for me. </p>
  
  <p>Here's my code: </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#nav ul {
      padding:0px;
      height:37px;
      position: fixed;
      top: -12px;
      left: 850px;
  }
  
  .nav li {
      margin:0px;
      list-style: none;
  }
  
  #nav li, #nav .last {
      float:left;
  }
  
  #nav a {
      text-decoration: none;
      text-transform:uppercase;
      width:auto;
      font-weight:bold;
      height:auto;
      padding: 85px 10px 5px;
      height:18px;
      color:#3a434e;
      font-size:12px;
      float:left;
  }
  
  #ie7 #nav a, #ie6 #nav a {
      font-size:9px;
      padding:11px 8px 5px;
  }
  
  #nav li:hover a, #nav .active a {
      color:#4D4D4D!important;
      background-image:url(../imgs/nav_active.gif);
      background-position:right center;
  
      -moz-border-radius-bottomright: 5px;
      -moz-border-radius-bottomleft: 5px;
      -webkit-border-bottom-right-radius: 5px;
      -webkit-border-bottom-left-radius: 5px;
  }
  
  #nav li:hover a {
      color:#FFF!important;
      background-color: #C1272D;  
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="nav" class="nav"&gt;
      &lt;ul&gt;            
          &lt;li class="active normal"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="normal"&gt;&lt;a href="#"&gt;Basket&lt;/a&gt;&lt;/li&gt;
          &lt;li class="normal"&gt;&lt;a href="#"&gt;Lightbox&lt;/a&gt;&lt;/li&gt;
          &lt;li class="normal"&gt;&lt;a href="#"&gt;My Account&lt;/a&gt;&lt;/li&gt;
          &lt;li class="normal"&gt;&lt;a href="#"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
          &lt;li class="normal"&gt;&lt;a href="#"&gt;Admin&lt;/a&gt;&lt;/li&gt;
          &lt;li class="last"&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt;        
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>