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?
<!DOCTYPE html>
<html>
<head>
<style type="text/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;
}
</style>
</head>
<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>
<ul>
</div>
</body>
</html>
3 answers
solution1
17 ACCPTED 2012-10-26 18:22:51
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; } #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.
solution2
0 2012-10-26 18:11:05
just try li { display:table-cell; } li { display:table-cell; } instead of float:left
solution3
0 2012-10-26 18:54:14
You've set width: 100%; on <div id="menu"> , which means that it'll be 100% as wide as its parent - which boils down to the browser window.
Instead, enforce a minium width roughly equal to the size of the elements contents, width: 35em; in this case. A relative measurement, based on the size of the text, will scale with bigger text, but you'll need to increase it if the contents are bigger.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.