Javascript css调整水平下拉菜单的大小_Javascript_Jquery_Html_Css

Javascript css调整水平下拉菜单的大小

javascript jquery html css

Javascript css调整水平下拉菜单的大小,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想有一些控制菜单栏的宽度，作为一个例子，它将是伟大的，如果每个项目只使用每边5px作为填充。目前，整个菜单在移动设备上使用了太多的屏幕宽度 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" cont

我想有一些控制菜单栏的宽度，作为一个例子，它将是伟大的，如果每个项目只使用每边5px作为填充。目前，整个菜单在移动设备上使用了太多的屏幕宽度

    <!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>


* {
框大小：边框框；
}
.下拉菜单{
位置：相对位置；
背景#005555；
列表样式类型：无；
高度：40px；
宽度：460px；
显示器：flex；
填充：0；
保证金：0自动；
背景图像：url（“http://snaklvr.com/bg.jpg");
}
img{
浮动：中心；
}
.放下菜单李a{
填充：12px 20px；
显示：内联块；
颜色：#fff；
文字装饰：无；
字体：12px arial，verdana，无衬线；
}
.下拉菜单>li{
右边框：1px实心#75809a；
宽度：100%；
文本对齐：居中；
}
.下拉菜单>李：最后一个孩子{
边界权：无；
}
/*子菜单*/
.下拉菜单{
文本对齐：左对齐；
位置：绝对位置；
左：-9999px；
顶部：-9999px；
列表样式类型：无；
显示：内联；
}
.下拉菜单li:悬停{
位置：相对位置；
背景：#75809a；
}
.下拉菜单li：悬停ul{
左：0px；
顶部：38px；
背景：#75809a；
填充：0px；
}
.下拉菜单li：将鼠标悬停在ul li a上{
填充：10px；
显示：块；
宽度：168px；
文本缩进：15px；
背景色：#75809a；
}
.下拉菜单li:悬停ul li a:悬停{
背景#005555；
}
t车身部{
溢出：滚动；
高度：400px；
}
#在中心{
文本对齐：居中；
}
div.topdiv{
明确：两者皆有；
位置：固定；
排名：0；
身高：60%；
宽度：100%；
背景色：#bfb9b5；
颜色：#FFFFFF；
字体大小：16px；
文本对齐：居中；
左：400；
}
下潜{
明确：两者皆有；
位置：固定；
最高：60%；
身高：40%；
宽度：100%；
背景色：#bfb9b5；
颜色：#FFFFFF；
字体大小：16px；
文本对齐：居中；
}
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+'，滚动条=no'；
var EventsParams='Width=620，Height=360，Left='+LeftsideEventsPopup+'，Top='+TopOfEventsPopup+'，滚动条=no'；
功能会议\弹出窗口（mylink、windowname）{
如果（！window.focus）返回true；
var href；
if（typeof（mylink）='string'）href=mylink；
else href=mylink.href；
window.open（href，windowname，MeetingsParams）；
返回false；
}
函数事件\u弹出窗口（mylink、windowname）{
如果（！window.focus）返回true；
var href；
if（typeof（mylink）='string'）href=mylink；
else href=mylink.href；
打开（href，windowname，EventsParams）；
返回false；
}

将菜单的

宽度

更改为

最大宽度

，使其缩放到较小的尺寸，并将链接上的水平填充更改为5px（或任何您想在此处使用的内容）


* {
框大小：边框框；
}
.下拉菜单{
位置：相对位置；
背景#005555；
列表样式类型：无；
高度：40px；
最大宽度：460像素；
显示器：flex；
填充：0；
保证金：0自动；
背景图像：url（“http://snaklvr.com/bg.jpg");
}
img{
浮动：中心；
}
.放下菜单李a{
填充：12px 5px；
显示：内联块；
颜色：#fff；
文字装饰：无；
字体：12px arial，verdana，无衬线；
}
.下拉菜单>li{
右边框：1px实心#75809a；
宽度：100%；
文本对齐：居中；
}
.下拉菜单>李：最后一个孩子{
边界权：无；
}
/*子菜单*/
.下拉菜单{
文本对齐：左对齐；
位置：绝对位置；
左：-9999px；
顶部：-9999px；
列表样式类型：无；
显示：内联；
}
.下拉菜单li:悬停{
位置：相对位置；
背景：#75809a；
}
.下拉菜单li：悬停ul{
左：0px；
顶部：38px；
背景：#75809a；
填充：0px；
}
.下拉菜单li：将鼠标悬停在ul li a上{
填充：10px；
显示：块；
宽度：168px；
文本缩进：15px；
背景色：#75809a；
}
.下拉菜单li:悬停ul li a:悬停{
背景#005555；
}
t车身部{
溢出：滚动；
高度：400px；
}
#在中心{
文本对齐：居中；
}
div.topdiv{
明确：两者皆有；
位置：固定；
排名：0；
身高：60%；
宽度：100%；
背景色：#bfb9b5；
颜色：#FFFFFF；
字体大小：16px；
文本对齐：居中；
左：400；
}
下潜{
明确：两者皆有；
位置：固定；
最高：60%；
身高：40%；
宽度：100%；
背景色：#bfb9b5；
颜色：#FFFFFF；
字体大小：16px；
文本对齐：居中；
}
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会议Sparams=
宽=1100，高=600，左=+
左侧会议+
“，Top=”+
TopOfMeetingsPopup+
“，滚动条=否”；
var EventsParams=
宽度=620，高度=360，左侧=+
LeftsideEventsPopup+
“，Top=”+
Topofentspopup+
“，滚动条=否”；
功能会议\弹出窗口（mylink、windowname）{
如果（！window.focus）返回true；
var href；
if（typeof mylink==“string”）href=mylink；
else href=mylink.href；
window.open（href，windowname，MeetingsParams）；
返回false；
}
函数事件\u弹出窗口（mylink、windowname）{
如果（！window.focus）返回true；
var h