Prevent CSS Horizontal Drop-Down Menu from "Wrapping"

Question

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? ``` #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; } ``` ```

Accepted Answer

Add the following CSS:

```
#menu > ul { 
    white-space: nowrap;
}

#menu > ul > li {
  display: inline-block;
  float: none;
  margin: 0 -3px 0 0;
}
```

`float: none` is needed to override the rule `#menu li { float: left; }`, which causes the parent `ul`'s `white-space: nowrap` rule to be ignored.

`display: inline-block` produces an inline layout for the list items, but still allows them to be treated like block elements with respect to sizing and positioning.

The negative `margin-right` is needed to override the default conversion of a linebreak in the HTML source to a single space; without it, your top-level menu items will have spaces between them.

`display: inline-block` doesn't work properly in IE7. A fix is described here:

to get inline-block working for any element in Internet Explorer simply add "zoom:1; *display: inline; _height: 30px;" to the end of that elements style oh and yes change the height to whatever you need.

Prevent CSS Horizontal Drop-Down Menu from "Wrapping"

Solution

Problem