Menu
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>
745
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.
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
