这可能是一个愚蠢的问题，但我尝试了很多在这里和网上找到的解决方案，但仍然无法弄清楚。 我有一个主菜单栏，每个项目都是ul中的li。 如何让它始终显示在浏览器的中心？
顺便说一句，我需要保持显示对应子菜单的javascript，当主菜单项工作时。
下面是html，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nothing</title>
<link rel="stylesheet" type="text/css" href="final.css">
<script language="javascript" type="text/javascript" src="final.js"></script>
</head>
<body>
<div id="header">
<div id="logo">
<div class="verti">
<a href="1.html"><img src="../Images/logo.png" width="642" height="68" border="0" /></a>
</div>
</div>
<div id="menu">
<div class="verti">
<ul>
<li id="m1" class='menulist' onmouseover='mov(1);' ><a href="1.html">Main</a></li>
<li id="m2" class='menulist' onmouseover='mov(2);' ><a href="1.html">Intro</a></li>
<li id="m3" class='menulist' onmouseover='mov(3);' ><a href="1.html">Info</a></li>
<li id="m4" class='menulist' onmouseover='mov(4);' ><a href="1.html">Details</a></li>
<li id="m5" class='menulist' onmouseover='mov(5);' ><a href="1.html">Contact</a></li>
<li id="m6" class='menulist' onmouseover='mov(6);' ><a href="1.html">Service</a></li>
<li id="m7" class='menulist' onmouseover='mov(7);' ><a href="1.html">News</a></li>
<li id="m8" class='menulist' onmouseover='mov(8);' ><a href="1.html">About</a></li>
<li id="m9" class='menulist' onmouseover='mov(9);' ><a href="1.html">Contact</a></li>
</ul>
</div>
</div>
<div id="submenu">
<div class="verti">
<ul>
<li id= "s3_1" class='s3' onmouseover='mov(3);'><a href="1.html">Real Info</a></li>
<li id= "s3_2" class='s3' onmouseover='mov(3);'><a href="1.html">Fake Info</a></li>
<li id= "s3_3" class='s3' onmouseover='mov(3);'><a href="1.html">Disinfo</a></li>
</ul>
<ul>
<li id= "s4_1" class='s4' onmouseover='mov(4);'><a href="1.html">Poor details</a></li>
<li id= "s4_2" class='s4' onmouseover='mov(4);'><a href="1.html">Rich details</a></li>
<li id= "s4_3" class='s4' onmouseover='mov(4);'><a href="1.html">None-details</a></li>
</ul>
</div>
</div>
</div><!--header-->
</body>
</html>
以下是CSS，
@charset "utf-8";
/* CSS Document */
li {
text-decoration: none;
}
.verti {
}
#logo {
margin: 0 0 0 0;
}
#image {
border-radius: 10px;
}
#menu {
background-color: #65EBEB;
height: 50px;
border-radius: 5px;
margin: 0 0 0 0;
}
#menu ul {
width: 990px;
border-radius: 5px;
text-align: center;
height: 50px;
margin-left: -35px;
}
#menu ul li {
display: inline-block;
line-height: 50px;
list-style-type: none;
width: 90px;
font-weight: 600;
}
.currenttab a {
color:red;
font-weight: 1200;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
.menulist a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menulist a:active {
background-color: yellow;
}
#submenu {
height: 50px;
background-color: #F1F1F1;
border-radius: 5px;
margin-top:0;
}
#submenu ul {
position: absolute;
margin-top: 0;
width: 960px;
border-radius: 5px;
padding: 5px;
text-align: center;
}
#submenu ul li {
line-height: 40px;
list-style-type: none;
padding-left: 30px;
display: none;
font-weight: bold;
}
#submenu a {
text-decoration: none;
color: green;
font-size: 14px;
font-weight:500;
}
#submenu a:hover {
color: red;
font-size: 16px;
font-weight: bold;
}
以下是用于显示子菜单的js，
function mov(object){
//reset submenu display to none
displaynone();
//set selected menu styles
ssms(object);
//display submenu for selected menu
displaysub(object);
}
function displaynone(){
var n;
for (n = 0; n < 10; n++) {
var s = document.getElementsByClassName("s"+n);
for (k = 0; k < s.length; k++) {
s[k].style.display ="none";
}
}
}
function menurestore(){
for(m = 1; m<10; m++){
var ml = document.getElementById("m"+m);
ml.className = "menulist";
}
}
function ssms(n){
//reset unselected menu styles
menurestore();
var y = document.getElementById("m"+n);
y.className = "currenttab";
}
function displaysub(object){
var x = document.getElementsByClassName("s"+object);
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display ="inline";
}
}
非常感谢你的帮助..在这件事情上挣扎了几天。
答案 0 :(得分：0)
尝试将此课程添加到<ul>代码：
.center-menu {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
}
Flexbox是新的CSS属性，并未在所有浏览器中完全支持，但在很多浏览器中都受到支持。
使用jQuery显示悬停时的子菜单：
<!doctype html>
<html lang="en">
<head>
<title>Hover Menu</title>
<meta charset="utf-8">
<style>
ul {
list-style-type: none;
text-align: center;
}
.hover-menu {
position: relative;
}
.hover-menu li {
padding: 15px;
background-color: silver;
color: black;
border: 1px solid black;
width: 100px;
}
.sub-menu {
position: absolute;
visibility: hidden;
top: 0px;
left: 140px;
}
.hover-menu li:nth-child(3) .sub-menu {
top: 50px;
left: 140px;
}
.hover-menu li:nth-child(4) .sub-menu {
top: 100px;
left: 140px;
}
</style>
</head>
<body>
<ul class="hover-menu">
<li><span>Navigation</span></li>
<li>
<a href="index.html">Home</a>
<ul class="sub-menu">
<li>Link</li>
<li>Another Link</li>
<li>Yet Another</li>
</ul>
</li>
<li>
<a href="about.html">About</a>
<ul class="sub-menu">
<li>Link</li>
<li>Another Link</li>
<li>Yet Another</li>
</ul>
</li>
<li>
<a href="contact.html">Contact</a>
<ul class="sub-menu">
<li>Link</li>
<li>Another Link</li>
<li>Yet Another</li>
</ul>
</li>
</ul>
<script src="vendors/jquery-1.11.3.min.js"></script>
<script>
$('ul.hover-menu li').hover(function() {
$('ul:first',this).css('visibility', 'visible');
}, function(){
$('ul:first',this).css('visibility', 'hidden');
});
</script>
</body>
</html>