I am getting frustrated at the fact, that this little nice menu will wrap once the browser window is re-sized. How can the wrapping be prevented and it would stay in a fixed state, regardless if the window is resized?

```css
#menu {
  border-top: 1px solid #FFF;
  padding: 0;
  margin: 0;
  position: fixed;
  top: 30px;
  left: 0px;
  font-size: 8pt;
  width: 100%;
}

#menu ul {
  padding: 0;
  margin: 0;
}

#menu li {
  position: relative;
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

#menu li a {
  width: 120px;
  height: 20px;
  display: block;
  text-decoration: none;
  line-height: 20px;
  background-color: #A9BBD3;
  color: #FFF;
}

#menu li a:hover {
  background-color: #446087;
}

#menu ul ul {
  position: absolute;
  top: 21px;
  visibility: hidden;
}

#menu ul ul li a {
  width: 115px;
  padding-left: 5px;
}

#menu ul li:hover ul {
  visibility: visible;
}

#menu>ul>li>a {
  text-align: center;
}

#menu>ul>li>a:hover {
  border-bottom: 1px solid #FFF;
}
```

```html
<body>
  <div id="menu">
    <ul>
      <li><a href="#nogo">File</a>
        <ul>
          <li><a href="#nogo">Save</a></li>
          <li><a href="#nogo">Save & Exit</a></li>
          <li><a href="#nogo">Exit</a></li>
        </ul>
      </li>
      <li><a href="#nogo">Edit</a>
        <ul>
          <li><a href="#nogo">Add</a></li>
          <li><a href="#nogo">Delete</a></li>
          <li><a href="#nogo">Clear Form</a></li>
        </ul>
      </li>
      <li><a href="#nogo">Reports</a>
        <ul>
          <li><a href="#nogo">Export to Excel</a></li>
          <li><a href="#nogo">Export to HTML</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>
```