HTML/CSS 下拉菜单宽度。请帮忙

【问题标题】：HTML/CSS Dropdown menu width. Help, pleaseHTML/CSS 下拉菜单宽度。请帮忙
【发布时间】：2014-06-05 13:29:05
【问题描述】：

我的网站上有一个 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 &amp; 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"> &copy; 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> &nbsp;|&nbsp; <a href="#">Term &amp; Conditions</a> &nbsp;|&nbsp; <a href="#">Shipping &amp; Devlivery</a> &nbsp;|&nbsp; <a href="#">About Us</a> &nbsp;|&nbsp; <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*/

提前感谢您提供的任何和所有帮助、建议和/或建议。非常感谢！

【问题讨论】：

  • 欢迎来到 SO。问题是什么/期望的输出是什么..？
  • 我在尝试访问您上面的链接时遇到 DNS 错误。你的演示失败了吗？
  • @T J 非常感谢您的快速回复！如果您查看下拉菜单并滚动过去，比如说主题公园，然后您进入第三个显示环球影城的条目/链接，它应该是奥兰多环球影城。它确实在那里，但奥兰多部分下降到下一行，而不是整个奥兰多环球影城都在一条线上。我似乎无法让菜单上的下拉部分与单词一样宽。我希望这是有道理的。
  • @ajm 感谢您的回复。抱歉，我修复了 OP。这是链接：greatorlandodiscounts.com/test-june2014
  • 请给我们一个有问题的代码？这是一个非常大的代码。

标签： html css drop-down-menu


【解决方案1】：

您的问题是由您的几个选择器“级联”到弹出菜单中的项目引起的。

#menuLeft li a 在顶部导航中的锚标记上设置 110 像素的宽度。它还具有在弹出菜单中选择锚标签的副作用，将它们的宽度限制为 110 像素并强制它们的文本换行。 #menuLeft li 将列表项浮动到左侧，这会使它们“对齐”到您的顶级导航锚标记的 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 */
}

这将迫使您的链接占据单行，但由于您的列表项是浮动的，因此您需要在链接文本和浮出控件的背景颜色之间留出一点视觉空间（恕我直言，无论如何 :-)）。

这会给你一点空间：

#menuLeft li ul li {
    float: none;    /* No need to float these links at all. */
    padding: 0 .5em;  /* Bit of space. YMMV. */
}

【讨论】：

  • 另外，请检查“为什么要从我们这里购买？”中“安全套接字层”的拼写。子弹。
  • 哇！那成功了。非常感谢您的时间和帮助。这是我给你的虚拟啤酒！我花了很多时间试图弄清楚你在 30 分钟内完成了什么。我真的很感激。您如何选择最佳答案或给出您的代表分数？
  • 在赞成/反对箭头的某处应该有一个绿色的复选标记来标记答案。虚拟啤酒几乎和真实啤酒一样好！
  • 完美！我通过您的解决方案检查了绿色箭头。再次，我真的很感谢你抽出时间来帮助我解决这个问题。谢谢！
猜你喜欢
  • 2014-07-04
  • 1970-01-01
  • 1970-01-01
  • 2013-04-24
  • 1970-01-01
  • 1970-01-01
  • 2016-08-15
  • 1970-01-01
  • 2012-09-04
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode