我的网站上有一个 HTML/CSS 下拉菜单。我在实际下拉菜单的宽度方面遇到了一些麻烦，我无法弄清楚是什么原因造成的。您可以看到下拉菜单的宽度与导航栏的宽度相同。问题是一些下 zipper 接比导航栏框更宽，导致超过该宽度的词下降到下一行。
我希望这能说得通。这是 URL、HTML 和 CSS:
http://greatorlandodiscounts.com/test-june2014/
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Wrapper container start-->
<div id="wrapperContainer">
<div id="topBar">
<div id="wrapper">
<!--top left phone number and icon start-->
<div id="leftTop">
<div id="facebookTop"> <a href="#"> <img src="images/facebook-icon.png" alt="GreatOrlandoDiscounts Become our friend on Facebook!" /> </a> </div>
<p class="topLeftNumber">Call us at:
<mark class="orange">1-800-544-7646</mark>
</p>
</div>
<!--top left phone number and icon end-->
<!--top right phone number and icon start-->
<div id="rightTop">
<div id="twitterTop"> <img src="images/twitter-icon.png" alt="GreatOrlandoDiscounts Follow us on Twitter" /> </div>
<p class="topRightNumber">Call us at:
<mark class="orange">1-800-544-7646</mark>
</p>
</div>
<!--top left phone number and icon end-->
<!--Left nav bar start-->
<div id="leftNavBar">
<!--left nav dropdown start-->
<div id="navBarLeft">
<div id="dropdownContainerLeft">
<div id="menuLeft">
<ul>
<li class="home"><a href="http://www.greatorlandodiscounts.com">HOME</a></li>
<li class="attractions"><a href="#">THEME PARKS</a>
<ul>
<li class="attractions"><a href="#">Disney Tickets</a></li>
<li class="attractions"><a href="#">Universal Orlando Resort</a></li>
<li class="attractions"><a href="#">Universal Studios Orlando</a></li>
<li class="attractions"><a href="#">Islands of Adventure</a></li>
<li class="attractions"><a href="#">SeaWorld</a></li>
<li class="attractions"><a href="#">Busch Gardens</a></li>
<li class="attractions"><a href="#">Legoland Florida</a></li>
<li class="attractions"><a href="#">Discovery Cove</a></li>
<li class="attractions"><a href="#">Disney Quest</a></li>
</ul>
</li>
<li class="attractions"><a href="#">WATER PARKS</a>
<ul>
<li class="attractions"><a href="#">Disney</a></li>
<li class="attractions"><a href="#">Universal Studios</a></li>
<li class="attractions"><a href="#">SeaWorld</a></li>
<li class="attractions"><a href="#">Busch Gardens</a></li>
<li class="attractions"><a href="#">Dinner Shows</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--left nav dropdown end-->
</div>
<!--Left nav bar end-->
<!--Right nav bar start-->
<div id="rightNavBar">
<!--Right nav dropdown start-->
<div id="navBarRight">
<div id="dropdownContainerRight">
<div id="menuRight">
<ul>
<li class="attractions"><a href="#">DINNER SHOWS</a>
<ul>
<li class="attractions"><a href="#">Disney</a></li>
<li class="attractions"><a href="#">Universal Studios</a></li>
<li class="attractions"><a href="#">SeaWorld</a></li>
<li class="attractions"><a href="#">Busch Gardens</a></li>
<li class="attractions"><a href="#">Dinner Shows</a></li>
</ul>
</li>
<li class="attractions"><a href="#">ATTRACTIONS</a>
<ul>
<li class="attractions"><a href="#">Disney</a></li>
<li class="attractions"><a href="#">Universal Studios</a></li>
<li class="attractions"><a href="#">SeaWorld</a></li>
<li class="attractions"><a href="#">Busch Gardens</a></li>
<li class="attractions"><a href="#">Dinner Shows</a></li>
</ul>
</li>
<li class="attractions"><a href="#">SERVICES</a>
<ul>
<li class="attractions"><a href="#">Disney</a></li>
<li class="attractions"><a href="#">Universal Studios</a></li>
<li class="attractions"><a href="#">SeaWorld</a></li>
<li class="attractions"><a href="#">Busch Gardens</a></li>
<li class="attractions"><a href="#">Dinner Shows</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--Right nav dropdown end-->
</div>
<!--Right nav bar end-->
<!--Main image start - ONLY CHANGE IMAGE IN INLINE CODE-->
<div id="mainImage"> <img src="images/main-image.jpg" alt="Discount Walt Disney World Tickets" /> </div>
<!--Main image end-->
<!--Logo start-->
<div id="logo"> <a href="http://www.greatorlandodiscounts.com"> <img src="images/logo.png" alt="Great Orlando Discount Tickets" /> </a> </div>
<!--Logo end-->
</div>
</div>
</div>
<!--Wrapper container end-->
<!--Middle section start-->
<div id="midSecWrapper">
<!--midSpacer start-->
<div id="midSpacer"></div>
<!--midSpacer end-->
<!--Content start-->
<div id="midContent">
<!--top section start-->
<div id="topContent">
<!--left ad box start-->
<div id="leftAdBox"> <a href="#"> <img src="images/dis-front-ad.jpg" alt="Discount Disney World Tickets" /> </a> </div>
<!--left ad box end-->
<!--center ad box start-->
<div id="centerAdBox"> <a href="#"> <img class="centered" src="images/uni-front-ad.jpg" alt="Discount Universal Studios Orlando Tickets" /> </a> </div>
<!--center ad box end-->
<!--right ad box start-->
<div id="rightAdBox"> <a href="#"> <img class="topFrontRight" src="images/sea-front-ad.jpg" alt="Discount Sea World Orlando Tickets" /> </a> </div>
<!--right ad box end-->
</div>
<!--top section end-->
<!--center section start-->
<div id="centerContent">
<!--center left begin-->
<div id="centerLeft">
<h2> Special Disney Ticket Offer! </h2>
<p class="specCont"> <img class="specImg" src="images/dis-tick-front.jpg" alt="Special Disney Ticket Offer!" /> Super Value Disney 3 Day Touch of Magic Ticket! Just $219 for each ticket! Get 3 Days to visit the Disney Theme Parks (Magic Kingdom, Epcot, Hollywood Studios, Animal Kingdom) PLUS a 4th day at Disney Quest, Blizzard Beach or Typhoon Lagoon! For an unbelievable value! Call & ask for the Resort offer<br />
(restrictions apply).<br />
<strong>Call us: 1-800-544-7646</strong> </p>
</div>
<!--center left end-->
<!--center right begin-->
<div id="centerRight"> <a href="#"> <img class="rightFrontImg" src="images/legoland-fl-front-ad.jpg" alt="Legoland Florida Discount Tickets" /> </a> </div>
<!--center right end-->
</div>
<!--center section end-->
<!--under center content start-->
<div id="underCenter">
<!--under center left start-->
<div id="unCenLeft"> <a href="#"> <img class="leftFrontImg" src="images/3musk-front.jpg" alt="The 3 Musketeers Dinner Show Discount Tickets" /> </a> </div>
<!--under center left end-->
<!--under center right start-->
<div id="unCenRight"> <a href="#"> <img class="rightFrontImg" src="images/wild-fl-front.jpg" alt="The 3 Musketeers Dinner Show Discount Tickets" /> </a> </div>
<!--under center right start-->
</div>
<!--under center content end-->
<!--main content start-->
<div id="mainContentContainer">
<!--main left start-->
<div id="mainLeft"> <img class="mainContImg" src="images/disney-char.jpg" alt="Walt Disney World Discount Tickets" /> </div>
<!--main left end-->
<!--main right start-->
<div id="mainRight">
<h3> Discount Disney World Tickets </h3>
<p class="contOrange"> To help us keep great Disney ticket prices, please click the +1 on the left or follow us on Facebook for great deals and discounts and prizes.<br />
FREE Standard USPS delivery in the US and FREE office pick up. *Office open from Mon-Sat 8am-8pm, Sun 8am-5pm. Closed on Christmas. </p>
<p class="mainInfoPara"> OK - Let's cut right to business. You came here surfing for discount Disney World tickets and that's what we offer. We are an authorized, full-service, official Disney ticket provider, Universal Studios ticket supplier and SeaWorld ticket seller. We are also authorized OFFICIAL ticket resellers for Busch Gardens tickets, all Orlando dinner show tickets and Orlando Florida theme park attraction ticket resellers. The name Billy Boy's Tickets is known worldwide as a legitimate leader in discount attraction tickets. Licensed, bonded, certified Florida sellers of travel - we have our IATA & CLIA travel agent certifications and stand behind EVERY ticket we sell. We are a one stop shop for Disney tickets, hotel accommodations, rental cars, home rentals and more. DON'T chase around the web, dealing with fly by night websites that may or may not have valid tickets. Go with a name you can trust - Billy Boy's Discount Disney Tickets. </p>
</div>
<!--main right end-->
</div>
<!--main content end-->
<!--youtube container start-->
<div id="youTubeContainer">
<!--youtube container left start-->
<div id="youTubeLeft">
<h4> Why Should You Buy From Us? </h4>
<p class="youtubeCont"> There are good reasons to buy your discount Disney tickets and Orlando theme park tickets from us vs. other discount Disney ticket wholesalers or internet sites that are out there. Let us help you with your affordable Disney vacations. </p>
<ul class="whyBuyList">
<li>Over 31 years in the same location</li>
<li>We are open 7 days a week</li>
<li>Licensed discount wholesaler</li>
<li>We use Secure Sockey Layer Technology</li>
<li>Disney Group Discounts</li>
<li>Never purchase Used Disney Tickets</li>
<li>EVERY ticket we sell is NEW</li>
<li>THE trusted name in discount Disney tickets</li>
</ul>
<p class="youtubeCont"> As you can see, GreatOrlandoDiscounts can get you the best deals on discount Orlando tickets the fast, safe and easy way. Let us help you get the tickets that you need for your visit. </p>
</div>
<!--youtube container left end-->
<!--youtube container right start-->
<div id="youTubeRight">
<h4>Epcot Food and Wine Festival</h4>
<p class="youTube">
<iframe width="440" height="248" src="//www.youtube.com/embed/FV0jEBb2W24" frameborder="0" allowfullscreen></iframe>
</p>
</div>
<!--youtube container right end-->
</div>
<!--youtube container end-->
</div>
<!--Content end-->
</div>
<!--Middle section end-->
<!--spacer start-->
<div id="preFootSpacer"> </div>
<!--spacer end-->
<!--footer start-->
<!--footer background container start-->
<div id="footerBg">
<!--footer content start-->
<div id="footerContent">
<!--footer left start-->
<div id="footerLeft">
<p class="footContLeft"> © 2014-15 ~ Rocker Fruit Company. All Rights Reserved. </p>
</div>
<!--footer left end-->
<!--footer right start-->
<div id="footerRight">
<p class="footContRight"> <a href="#">Privacy Policy</a> | <a href="#">Term & Conditions</a> | <a href="#">Shipping & Devlivery</a> | <a href="#">About Us</a> | <a href="#">Contact Us</a> </p>
</div>
<!--footer right end-->
</div>
<!--footer content end-->
</div>
<!--footer background container end-->
<!--footer end-->
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
body {
margin: 0 auto;
background-image:url(../images/body-bg.jpg);
background-repeat:repeat;
}
#wrapperContainer {
margin: 0 auto;
width:100%;
height:501px;
}
#topBar {
width: 100%;
height: 58px;
background-image:url(../images/top-bar.png);
background-repeat:repeat-x;
display:block;
}
#wrapper {
width: 980px;
height: 501px;
display:block;
position:relative;
z-index:100;
margin: 0 auto;
}
#logo {
width: 260px;
height: 185px;
position:relative;
z-index:0;
margin: 0 auto;
display: block;
}
#leftTop {
width: 350px;
height: 58px;
float: left;
}
#rightTop {
width: 360px;
height: 58px;
float: right;
}
#mainImage {
width: 980px;
height: 401px;
float: left;
clear: both;
position: absolute;
z-index: -100;
margin-top: 100px;
left: 0px;
top: -2px;
display:block;
}
#facebookTop {
float:left;
margin: 4px 10px 0px 0px;
}
#twitterTop {
float:right;
margin: 4px 0px 0px 10px;
}
#leftNavBar {
width: 340px;
height: 40px;
float: left;
clear: left;
z-index:600;
}
#rightNavBar {
width: 360px;
height: 40px;
float: right;
clear: right;
z-index:700;
}
#midSecWrapper {
margin: 0 auto;
width: 980px;
height: 100%;
clear: both;
}
#midSpacer {
width: 980px;
height: 30px;
background-image:url(../images/spacer.png);
background-repeat:repeat-x;
clear: both;
}
#midContent {
width:980px;
height:125px;
clear:both;
}
#topContent {
width: 980px;
height: 125px;
}
#leftAdBox {
width:324px;
height:125px;
float:left;
}
#centerAdBox {
width:334px;
height:125px;
float:left;
}
#rightAdBox {
width:322px;
height:125px;
float:right;
}
#centerContent {
width: 980px;
height: 238px;
}
#centerLeft {
width: 572px;
height: 238px;
float:left;
background-image:url(../images/center-left-bg.png);
background-repeat:no-repeat;
}
#centerRight {
width: 408px;
height: 238px;
float:right;
}
#underCenter {
width:980px;
height:121px;
}
#unCenLeft {
width:487px;
height:121px;
float:left;
}
#unCenRight {
width:493px;
height:121px;
float:right;
}
#mainContentContainer {
width:980px;
height:418px;
background-image:url(../images/main-cont.png);
}
#mainLeft {
width:511px;
height:418px;
float: left;
}
#mainRight {
width:469px;
height:418px;
float: right;
}
#youTubeContainer {
width:980px;
height:366px;
}
#youTubeLeft {
width:489px;
height:366px;
background-image:url(../images/youtubeLeft.png);
float: left;
}
#youTubeRight {
width:491px;
height:366px;
background-image:url(../images/youtubeRight.png);
float: right;
}
#preFootSpacer {
width: 980px;
height: 30px;
margin: 0 auto;
clear:both;
background-image:url(../images/spacer.png);
background-repeat:repeat-x;
}
#footerBg {
width: 100%;
height: 57px;
background-image:url(../images/footer-bg.png);
background-repeat:repeat-x;
clear:both;
}
#footerContent {
width: 980px;
height: 57px;
margin: 0 auto;
}
#footerLeft {
width: 386px;
height: 57px;
float: left;
}
#footerRight {
width: 594px;
height: 57px;
float: right;
}
h2 {
font-family:Helvetica, Arial, sans-serif;
font-size: 18px;
text-align:center;
margin: 0;
padding: 20px 0px 0px 0px;
color: #c74426;
}
h3 {
font-family:Helvetica, Arial, sans-serif;
font-size: 18px;
margin: 0;
padding: 20px 0px 0px 5px;
color: #c74426;
}
h4 {
font-family:Helvetica, Arial, sans-serif;
font-size: 18px;
margin: 0;
padding: 30px 0px 0px 25px;
color: #c74426;
}
.mainInfoPara {
font-family:Helvetica, Arial, sans-serif;
font-size: 14px;
margin: 0;
padding: 10px 15px 0px 5px;
color: #454f54;
}
.contOrange {
font-family:Helvetica, Arial, sans-serif;
font-size: 14px;
margin: 10px 15px 0px 5px;
color: #c74426;
}
.mainContImg {
padding-top: 9px;
}
.specCont {
font-family:Helvetica, Arial, sans-serif;
font-size: 14px;
margin: 0;
padding: 10px 20px 0px 0px;
color: #454f54;
}
.specImg {
float: left;
margin: 0px 10px 10px 10px;
}
.leftFrontImg {
margin-top:10px;
float: left;
}
.rightFrontImg {
margin-top:10px;
float: right;
}
.centered {
display:block;
margin:auto;
}
.topFrontRight {
float:right;
}
.topLeftNumber {
font-family:Helvetica, Arial, sans-serif;
font-size: 22px;
font-weight:bold;
color: #e1ebf4;
margin-top: 15px;
}
.topRightNumber {
font-family: Helvetica, Arial, sans-serif;
font-size: 22px;
font-weight:bold;
color: #e1ebf4;
margin-top: 15px;
text-align:right;
}
mark.orange {
color:#fa7252;
background: none;
}
.youTube {
margin: 40px 0px 0px 31px;
}
.youtubeCont {
font-family:Helvetica, Arial, sans-serif;
font-size: 14px;
margin: 10px 15px 0px 25px;
color: #c74426;
}
.twitterTop {
}
.whyBuyList {
font-family:Helvetica, Arial, sans-serif;
font-size: 16px;
margin: 10px 15px 0px 25px;
color: #454f54;
}
.footContLeft {
font-family:Helvetica, Arial, sans-serif;
font-size: 14px;
color: #fff;
margin: 24px 0px 0px 0px;
}
.footContRight {
font-family:Helvetica, Arial, sans-serif;
font-size: 14px;
color: #fff;
margin: 24px 0px 0px 55px;
}
.footContRight a {
font-family:Helvetica, Arial, sans-serif;
font-size: 14px;
text-decoration:none;
color: #fff;
}
.footContRight a:hover {
font-family:Helvetica, Arial, sans-serif;
font-size: 14px;
color: #c74426;
}
/*Nav bar style left*/
#menuLeft {
padding: 5px 0px 0px 0px;
margin:0;
}
#menuLeft ul{
padding:0;
margin:0;
}
#menuLeft li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
#menuLeft li a{
font-size: 12px;
width:110px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 2px #9d9d9d;
color: #454f54;
}
#menuLeft li a:hover{
background-image: url(../images/nav-hover-bg.jpg);
color: #fa7252;
background-color: #e1ebf4;
}
#menuLeft ul ul{
position: absolute;
top: 30px;
visibility: hidden;
background-color: #e1ebf4;
color: #22293c;
}
#menuLeft ul li:hover ul{
visibility:visible;
color: #22293c;
}
/*Nav Bar Style left end*/
/*Nav bar style right*/
#menuRight {
padding: 5px 0px 0px 0px;
margin:0;
}
#menuRight ul{
padding:0;
margin:0;
}
#menuRight li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
#menuRight li a{
font-size: 12px;
width:120px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 2px #9d9d9d;
color: #454f54;
}
#menuRight li a:hover{
background-image: url(../images/nav-hover-bg.jpg);
color: #fa7252; background-color: #e1ebf4;
}
#menuRight ul ul{
position: absolute;
top: 30px;
visibility: hidden;
background-color: #e1ebf4;
color: #22293c;
}
#menuRight ul li:hover ul{
visibility:visible;
color: #22293c;
}
/*Nav Bar Style right end*/
提前感谢您提供的所有帮助、意见和/或建议。非常感谢!
最佳答案
您的问题是由您的几个选择器“级联”到弹出菜单中的元素引起的。
#menuLeft li a 在顶部导航中的 anchor 标记上设置 110px 的宽度。它还具有在弹出菜单中选择 anchor 标记的副作用，将它们的宽度限制在 110 像素并强制其文本换行。 #menuLeft li 将列表项 float 到左侧，这会使它们“捕捉”到顶级导航 anchor 标记的 110 像素宽度，从而使弹出窗口变窄。
你可以用这样的东西覆盖那个样式:
#menuLeft li ul a {
white-space: nowrap; /* Force links not to wrap at all */
width: auto; /* Allow them to take up as much width as they need */
}
这将迫使您的链接占用一行，但由于您的列表项是 float 的，因此您需要在链接文本和弹出窗口的背景颜色之间留出一些视觉空间(恕我直言，无论如何 :-))。
这会给你一点空间:
#menuLeft li ul li {
float: none; /* No need to float these links at all. */
padding: 0 .5em; /* Bit of space. YMMV. */
}
关于HTML/CSS 下拉菜单宽度。请帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24061567/