我的网站上有一个HTML / CSS下拉菜单。我对实际下拉的宽度有点麻烦，我无法弄清楚可能导致它的原因。您可以看到下拉宽度与导航栏宽度相同。问题是某些下拉链接比导航栏更宽，导致超过该宽度的单词下拉到下一行。
我希望这有点道理。这是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*/
提前感谢您提供任何帮助，建议和/或建议。非常感谢！
答案 0 :(得分：1)
您的问题是由您的几个选择器和＃34;级联＆＃34;引起的。下至弹出菜单中的项目。
#menuLeft li a在顶部导航中的锚标记上设置110px的宽度。它还具有在弹出菜单中选择锚标签，将其宽度限制为110px并强制其文本换行的副作用。 #menuLeft li将列表项浮动到左侧，这会导致他们“快速”＃34;到顶级导航锚标签的110px宽度，这会使您的弹出窗口缩小。
您可以使用以下内容覆盖该样式：
#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 */
}
这会强制您的链接占用一行，但由于您的列表项已浮动，因此您需要在链接文本和弹出窗口的背景颜色之间留出一些可视空间（恕我直言，无论如何： - 。））
这会给你一点空间：
#menuLeft li ul li {
float: none; /* No need to float these links at all. */
padding: 0 .5em; /* Bit of space. YMMV. */
}