Home/ Questions/Q 8750461
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T12:52:02+00:00

I am getting frustrated at the fact, that this little nice menu will wrap

  • 0

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;
}
<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0