All geek questions in one place

Prevent the horizontal CSS drop-down menu from the Wrap section

I am upset that this small nice menu will be completed as soon as the browser window is resized. How to prevent wrapping and stay in a fixed state, regardless of whether 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>
+4
source share
3 answers

Add the following CSS:

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

float: none you must override the rule #menu li { float: left; } #menu li { float: left; } which ignores the parent rule ul white-space: nowrap .

display: inline-block creates an inline layout for list items, but still allows them to be treated as block items in relation to size and positioning.

A negative margin-right needed to override the conversion of the string in the default HTML source to one space; without it, your top-level menu items will have spaces between them.

display: inline-block does not work properly in IE7. The fix is ​​described here :

to make the inline box work for any element in Internet Explorer, just add "zoom: 1; * display: inline; _height: 30px;" until the end of this style of elements oh and yes change the height to whatever you need.

+17
source

just try li { display:table-cell; } li { display:table-cell; } instead of float:left

0
source

You set width: 100%; <div id="menu"> , which means that it will be 100% wider than its parent, which comes down to the browser window.

Instead, in this case, use a minimum width approximately equal to the size of the contents of the elements width: 35em; . A relative dimension based on text size will scale with large text, but you need to enlarge it if the content is larger.

0
source

Source: https://habr.com/ru/post/1442380/

More articles:


All Articles