0
我們試圖讓下拉菜單正常工作，但是當懸停在頂層時，它將展開寬度。我們如何確保它保持不變？懸停時CSS下拉菜單寬度變化
的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">[email protected]</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菜單上，它擴展爲顯示子級菜單。我們可以預防嗎？
感謝，