我们正在尝试使用下拉菜单，但是当悬停在顶层时，它会扩展其宽度。我们怎样才能确保它保持不变？
html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Velocior | Accelerate your web</title>
</head>
<body class="body">
<header role="banner">
<nav role="navigation">
<ul id="top-bar">
<li class="top-icon-block">
<a href="http://ha.efficens-software.com">
<span id="top_icon_home" title="Home"></span>
</a>
</li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><a href="http://ha.efficens-software.com"><span id="top_icon_register" title="Register"></span></a></li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><a href="http://ha.efficens-software.com"><span id="top_icon_login" title="Login"></span></a></li>
<li class="top-icon-sep-block"><img src="images/top_icon_separator.png"></li>
<li class="top-icon-block"><a href="http://ha.efficens-software.com"><span id="top_icon_logout" title="Logout"></span></a></li>
<li class="top-menu-left-edge-block"></li>
<li class="top-menu-button-block"><a href="zbala.com">Velocior</a></li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block"><a href="zbala.com">Technology</a></li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block"><span>Solutions</span></li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block"><span>Tech Center</span></li>
<li class="top-menu-sep-block"></li>
<li class="top-menu-button-block">
<span>Free BETA</span>
<ul class="sub-menu">
<li id="menu-item-115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-115"><a href="http://test/wp/solutions/wordpress-acceleration/">WordPress acceleration</a></li>
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://test/wp/solutions/apache-acceleration/">Apache acceleration</a></li>
<li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://test/wp/solutions/iis-sharepoint-acceleration/">IIS & SharePoint acceleration</a></li>
<li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://test/wp/solutions/isps-and-cloud-suppliers/">ISPs and Cloud suppliers</a></li>
<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://test/wp/solutions/developer-tools/">Developer tools</a></li>
<li id="menu-item-108" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-108"><a href="http://test/wp/products-and-pricing/">Pricing</a></li>
</ul>
</li>
<li class="top-menu-right-edge-block"></li>
</ul>
</nav>
</header>
<div id="page">
<div id="logo"><img src="images/velocior_logo.png"></div>
<div class="content long-content">
<div class="content-inner-left long-inner-content">
<div class="content-icon">
<img src="images/timer.png">
</div>
</div>
<div class="content-inner-right long-inner-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </div>
</div>
<div id="mailing-list-box">
<div class="mailing-list-separator"></div>
<div class="mailing-list-text">Join our mailing list : </div>
<!-- <div class="mailing-list-input">NREGEV@GMAIL.COM</div> -->
<input type="text" class="mailing-list-input">
<div class="mailing-list-submit"><img src="images/subscribe.png"></div>
</div>
<!--
<div class="content long-content">
<div class="content-inner-left long-inner-content">
some text and icon
</div>
<div class="content-inner-right long-inner-content">
some text but no icons here ..
</div>
</div>
-->
</div>
<div id="footer">
<span>Some footer text here</span>
</div>
</body>
</html>
CSS代码如下所示：
body {
background-color: black;
width: 950px;
margin-left: auto;
margin-right: auto;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
}
#top-bar {
position: relative;
display: block;
width: inherit;
height: 39px;
padding: 0px;
margin: 0px;
vertical-align: middle;
background-image: url("images/top_bar_bg.png");
background-repeat: repeat-x;
}
.top-icon-block {
width: 50px;
margin: 0px;
display: table-cell;
text-align: center;
}
.top-icon-block a {
position: relative;
top: 5px;
}
.top-icon-block span {
position: relative;
left: 10px;
background-repeat: none;
width: 30px;
height: 20px;
cursor: pointer;
display: block;
}
/* .top-icon-block div:hover { cursor: pointer; } */
#top_icon_home { background-image: url("images/home.png");}
#top_icon_home:hover { background-image: url("images/home_red.png");}
#top_icon_register { background-image: url("images/register.png");}
#top_icon_register:hover { background-image: url("images/register_red.png");}
#top_icon_login { background-image: url("images/login.png");}
#top_icon_login:hover { background-image: url("images/login_red.png");}
#top_icon_logout { background-image: url("images/logout.png");}
#top_icon_logout:hover { background-image: url("images/logout_red.png");}
/*
.top-icon-block img {
padding-top: 8px;
}
.top-icon-block img:hover {
cursor: pointer;
}
*/
.top-icon-sep-block {
width: 4px;
margin: 0px;
display: table-cell;
text-align: center;
/* background-image: url("images/top_icon_separator.png"); */
}
.top-icon-sep-block img {
padding-top: 8px;
}
.top-menu-left-edge-block {
width: 7px;
margin: 0px;
background-image: url("images/buttons_left_edge.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
.top-menu-sep-block {
width: 7px;
margin: 0px;
background-image: url("images/buttons_separator.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
.top-menu-right-edge-block {
width: 7px;
margin: 0px;
background-image: url("images/buttons_right_edge.png");
background-repeat: repeat-x;
display: table-cell;
text-align: center;
}
.top-menu-button-block {
width: 80px;
margin: 0px;
background-image: url("images/buttons_bg.png");
background-repeat: repeat-x;
display: table-cell;
}
.top-menu-button-block span, a{
font-size: 12px;
display: inline-block;
width: inherit;
text-align: center;
vertical-align: 6px;
color: white;
text-decoration: none;
}
.top-menu-button-block *:hover {
color: darkorange;
cursor: pointer;
}
#page {
position: relative;
/* background-image: url('images/background.jpg'); */
background-repeat: no-repeat;
display: inline-block;
width: inherit;
height: 564px;
z-index: 3;
/* border-style: solid;
border-color: red;
border-width: 1px;*/
}
#logo {
position: relative;
top: 25px;
left: 25px;
z-index: 2;
}
#footer {
position: relative;
background-color: #414142;
display: inline-block;
width: inherit;
height: 20px;
}
#footer span {
display: inline-block;
width: inherit;
text-align: center;
vertical-align: -2px; /*middle */
font-size: 10px;
color: white;
text-decoration: none;
}
.content {
position: absolute;
border-top: 1px solid lightgrey;
border-bottom: 1px solid grey;
border-radius: 15px 0px 15px 0px;
width: 640px;
bottom: 60px;
right: 0px;
padding: 5px;
background-color: rgba(255,255,255,0.92);
font-size: 13px;
}
.content-inner-left {
position: absolute;
border-right: 1px solid #AAAAAA;
width: 100px;
display: table-cell;
padding: 5px;
}
.content-inner-right {
position: absolute;
width: 515px;
display: table-cell;
left: 120px;
padding: 5px;
}
.content-icon {
position: relative;
width: 60px;
height: 60px;
top: 0px;
margin: auto;
}
.short-content { height: 130px; }
.long-content {height: 280px; }
.short-inner-content { height: 120px; }
.long-inner-content {height: 270px; }
#mailing-list-box {
position: absolute;
width: 350px;
height: 18px;
bottom: 42px;
right: 300px;
background-color: black;
padding: 0px;
}
.mailing-list-separator {
position: absolute;
display: table-cell;
left: 20px;
width: 3px;
height: inherit;
background-image: url("images/subscription_sep.png");
background-repeat: no-repeat;
top: 1px;
}
.mailing-list-text {
position: absolute;
display: table-cell;
left: 50px;
top: 1px;
width: 110px;
height: inherit;
color: white;
}
.mailing-list-input {
position: absolute;
display: table-cell;
left: 150px;
width: 140px;
top: 2px;
height: 13px;
vertical-align: middle;
color: red;
padding: 0px;
border: none;
font-size: 11px;
border-radius:2px;
}
.mailing-list-submit {
position: absolute;
display: table-cell;
left: 290px;
top: 2px;
width: 74px;
height: inherit;
cursor: pointer;
}
/*
nav ul:after {
content: "";
clear: both;
display: block;
}
*/
nav ul ul {
list-style-type: none;
}
nav ul li ul {display: none;}
nav ul li:hover > ul {display: inline-block;}
nav ul ul {
position: abslute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
background-color: grey;
}
/*
#top-bar li ul li {
position: relative;
z-index: 5;
background-color: rgba(0,0,0,0.6);
width: 220px;
height: 20px;
text-align: center;
border-bottom: 1px solid black;
border-radius: 4px;
display: block;
}
*/
/*
#top-bar li ul ul {
top: 0;
left: 100%;
}
#top-bar ul li:hover > ul {
border-left: 0;
display: block;
}
#top-bar li ul li a {
background: #efefef;
border-bottom: 1px solid #ededed;
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 2.181818182;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
#top-bar li ul li a:hover {
background: #e3e3e3;
color: #444;
}
*/
问题是，当我们将鼠标悬停在BETA菜单上时，它会展开以显示子级别菜单。我们可以阻止吗？
谢谢，
答案 0 :(得分：0)
我还没有找到一种不使用javascript的方法。
这是我用来完成此任务的jQuery snippet代码。代码将为顶级li和子菜单ul设置显式宽度。
你需要一些css规则。
父项nav ul > li需要设置overflow:visible;。