css Adjust the size for horizontal drop down menu
Question
I would like to have some control over the width of the menu bar, as an example it would be great if each item only used 5px for each side as padding. Presently the entire menu uses too much screen width on mobile devices.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="Width=device-Width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.drop_menu {
position: relative;
background: #005555;
list-style-type: none;
height: 40px;
width: 460px;
display: flex;
padding: 0;
margin:0 auto;
background-image: url("http://snaklvr.com/bg.jpg");
}
img {
float: center;
}
.drop_menu li a {
padding: 12px 20px;
display: inline-block;
color: #fff;
text-decoration: none;
font: 12px arial, verdana, sans-serif;
}
.drop_menu > li {
border-right: 1px solid #75809a;
width: 100%;
text-align: center;
}
.drop_menu > li:last-child {
border-right: none;
}
/* Submenu */
.drop_menu ul {
text-align: left;
position: absolute;
left: -9999px;
top: -9999px;
list-style-type: none;
display: inline;
}
.drop_menu li:hover {
position: relative;
background: #75809a;
}
.drop_menu li:hover ul {
left: 0px;
top: 38px;
background: #75809a;
padding: 0px;
}
.drop_menu li:hover ul li a {
padding: 10px;
display: block;
width: 168px;
text-indent: 15px;
background-color: #75809a;
}
.drop_menu li:hover ul li a:hover {
background: #005555;
}
tbody div{
overflow:scroll;
height:400px;
}
#InTheCenter {
text-align:center;
}
div.topdiv {
clear: both;
position: fixed;
top: 0;
height: 60%;
width: 100%;
background-color: #bfb9b5;
color: #FFFFFF;
font-size: 16px;
text-align: center;
left: 400;
}
div.bottomdiv {
clear: both;
position: fixed;
top: 60%;
height: 40%;
width: 100%;
background-color: #bfb9b5;
color: #FFFFFF;
font-size: 16px;
text-align: center;
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<SCRIPT TYPE="text/javascript">
var LeftsideMeetingsPopup = ((document.documentElement.clientWidth / 2) - 550);
var TopOfMeetingsPopup = ((document.documentElement.clientHeight / 2) - 300);
var LeftsideEventsPopup = ((document.documentElement.clientWidth / 2) - 310);
var TopOfEventsPopup = ((document.documentElement.clientHeight / 2) - 180);
var MeetingsParams = 'Width=1100,Height=600,Left=' + LeftsideMeetingsPopup + ',Top=' + TopOfMeetingsPopup + ',scrollbars=no';
var EventsParams = 'Width=620,Height=360,Left=' + LeftsideEventsPopup + ',Top=' + TopOfEventsPopup + ',scrollbars=no';
function Meetings_Popup(mylink, windowname) {
if (!window.focus) return true;
var href;
if (typeof(mylink) == 'string') href = mylink;
else href = mylink.href;
window.open(href, windowname, MeetingsParams);
return false;
}
function Events_Popup(mylink, windowname) {
if (!window.focus) return true;
var href;
if (typeof(mylink) == 'string') href = mylink;
else href = mylink.href;
window.open(href, windowname, EventsParams);
return false;
}
</SCRIPT>
</head>
<body bgcolor="#bfb9b5">
<div class="topdiv">
<div class="InTheCenter">
<br/><img src="http://snaklvr.com/test.jpg" width="940" height="200"><br/>
</div>
<div>
</BR>
<ul class="drop_menu">
<li><A href="#" onClick="return Meetings_Popup(this, 'notes')">Meeting List</a></li>
<li><A href="#" onClick="return Events_Popup(this, 'notes')">Events</a></li>
<li>
<A href='#'>Misc Links</a>
<ul>
<li><A target="_blank" href="http://www.amazon.com/">Amazon</a></li>
<li><A target="_blank" href="http://www.google.com">Google</a></li>
<li><A target="_blank" href="https://lowes.com/">Lowes</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
1 answers
solution1
1 ACCPTED 2017-06-11 23:54:14
Change the width of the menu to max-width so that it will scale to a smaller size, and change the horizontal padding on the links to 5px (or whatever you want to use there)
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="Width=device-Width, initial-scale=1"> <style> * { box-sizing: border-box; } .drop_menu { position: relative; background: #005555; list-style-type: none; height: 40px; max-width: 460px; display: flex; padding: 0; margin: 0 auto; background-image: url("http://snaklvr.com/bg.jpg"); } img { float: center; } .drop_menu li a { padding: 12px 5px; display: inline-block; color: #fff; text-decoration: none; font: 12px arial, verdana, sans-serif; } .drop_menu > li { border-right: 1px solid #75809a; width: 100%; text-align: center; } .drop_menu > li:last-child { border-right: none; } /* Submenu */ .drop_menu ul { text-align: left; position: absolute; left: -9999px; top: -9999px; list-style-type: none; display: inline; } .drop_menu li:hover { position: relative; background: #75809a; } .drop_menu li:hover ul { left: 0px; top: 38px; background: #75809a; padding: 0px; } .drop_menu li:hover ul li a { padding: 10px; display: block; width: 168px; text-indent: 15px; background-color: #75809a; } .drop_menu li:hover ul li a:hover { background: #005555; } tbody div { overflow: scroll; height: 400px; } #InTheCenter { text-align: center; } div.topdiv { clear: both; position: fixed; top: 0; height: 60%; width: 100%; background-color: #bfb9b5; color: #FFFFFF; font-size: 16px; text-align: center; left: 400; } div.bottomdiv { clear: both; position: fixed; top: 60%; height: 40%; width: 100%; background-color: #bfb9b5; color: #FFFFFF; font-size: 16px; text-align: center; } </style> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <SCRIPT TYPE="text/javascript"> var LeftsideMeetingsPopup = document.documentElement.clientWidth / 2 - 550; var TopOfMeetingsPopup = document.documentElement.clientHeight / 2 - 300; var LeftsideEventsPopup = document.documentElement.clientWidth / 2 - 310; var TopOfEventsPopup = document.documentElement.clientHeight / 2 - 180; var MeetingsParams = "Width=1100,Height=600,Left=" + LeftsideMeetingsPopup + ",Top=" + TopOfMeetingsPopup + ",scrollbars=no"; var EventsParams = "Width=620,Height=360,Left=" + LeftsideEventsPopup + ",Top=" + TopOfEventsPopup + ",scrollbars=no"; function Meetings_Popup(mylink, windowname) { if (!window.focus) return true; var href; if (typeof mylink == "string") href = mylink; else href = mylink.href; window.open(href, windowname, MeetingsParams); return false; } function Events_Popup(mylink, windowname) { if (!window.focus) return true; var href; if (typeof mylink == "string") href = mylink; else href = mylink.href; window.open(href, windowname, EventsParams); return false; } </SCRIPT> </head> <body bgcolor="#bfb9b5"> <div class="topdiv"> <div class="InTheCenter"> <br/><img src="http://snaklvr.com/test.jpg" width="940" height="200"><br/> </div> <div> </BR> <ul class="drop_menu"> <li> <A href="#" onClick="return Meetings_Popup(this, 'notes')">Meeting List</a> </li> <li> <A href="#" onClick="return Events_Popup(this, 'notes')">Events</a> </li> <li> <A href='#'>Misc Links</a> <ul> <li> <A target="_blank" href="http://www.amazon.com/">Amazon</a> </li> <li> <A target="_blank" href="http://www.google.com">Google</a> </li> <li> <A target="_blank" href="https://lowes.com/">Lowes</a> </li> </ul> </li> </ul> </div> </div> </body> </html>
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.
Related Question
Center and dynamically size the horizontal drop down menu bar using CSS
css drop down menu size and image issues
drop down menu: drop down lists horizontal underneath main menu
How to adjust drop-down menu item in <ul> with the use of css columns property?
how to make a drop down menu horizontal
Horizontal drop-down menu Umbraco
Two horizontal lines with Mega Drop Down Menu
not able to create horizontal menu drop down
Javascript?/CSS - Drop Down Menu
Drop down menu collapsing in css
Related Tags