下拉菜單的級別3沒有伸展到文本的寬度

我想弄清楚爲什麼我的下拉菜單的第三級不拉伸到包含在其中的文本的寬度。到目前爲止，文本只是自動縮進到下一行，但所有其他li不會這樣做，並在一行。有人能幫我找出爲什麼會發生這種情況嗎？謝謝！下拉菜單的級別3沒有伸展到文本的寬度

這裏是迄今爲止我所做的例子：http://themedwebdesign.com/salmon/

下面是HTML

<header> 
     <div class="container clearfix"> 
      <div id="logo"><img src="./img/salmon-logo.png" alt=""></div> 
      <nav> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Pages</a> 
         <ul> 
          <li><a href="#">About</a></li> 
          <li><a href="#">Services</a></li> 
          <li><a href="#">Meet the Team</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Features</a> 
         <ul> 
          <li><a href="#">Feature</a></li> 
          <li><a href="#">Level 3</a> 
           <ul> 
            <li><a href="#">Level 3</a></li> 
            <li><a href="#">Level 3</a></li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
        <li><a href="#">Portfolio</a> 
        <li><a href="#">Blog</a> 
         <ul> 
          <li><a href="#">Single</a></li> 
          <li><a href="#">Large</a></li> 
          <li><a href="#">Medium</a></li> 
          <li><a href="#">Small</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </nav> 
     </div> 
    </header>

這裏是CSS，我道歉，其使用頂嘴做出。如果需要編譯的CSS文件，那麼我會發布它。

nav { 
    float: right; 

    ul { 
     list-style: none; 
     position: relative; 
     display: inline-block; 
     margin: 0; 

     li { 
      float: left; 
      text-transform: uppercase; 
      font-weight: 300; 

      a { 
       text-decoration: none; 
       color: inherit; 
       padding: 15px 25px; 
       display: block; 
      } 

      &:hover { 
       color: $colorSite; 
      } 

      &:hover > ul { 
       display: block; 
      } 
     } 

     &:after { 
      content: ""; 
      clear: both; 
      display: block; 
     } 

     ul { 
      position: absolute; 
      top: 100%; 
      display: none; 
      padding: 0; 
      margin: 0; 
      border: 1px solid $colorSite; 

      li { 
       float: none; 
       position: relative; 

       a { 
        color: $colorDark; 
        text-decoration: none; 
        display: block; 
        padding: 15px 25px; 
        background-color: #fff; 

        &:hover { 
         color: #fff; 
         background-color: $colorSite; 
        } 
       } 
      } 

      ul { 
       position: absolute; 
       left: 100%; 
       top: 0; 
      } 
     } 
    } 
}

來源

2013-07-30 zachstarnes

如果想舒展，不想二號線，你可以簡單地做到這一點在你的CSS

header nav ul ul li a { white-space: nowrap; }

來源

2013-07-30 03:39:50 Raver0124

只是要width: 100%;下的CSS頭nav ul ul ul

來源

2013-07-30 03:38:01 MACMAN

謝謝你的工作！ – zachstarnes

你能接受答案嗎？ – MACMAN

一旦我添加了更多的文本後，我添加了一定量的文本再次縮進。 – zachstarnes

white-space: nowrap;將阻止來自包裝的文字。

header nav ul ul li { 
float: none; 
position: relative; 
white-space: nowrap; 
}

來源

2013-07-30 03:45:29 Praveen

它確實阻止了文本的換行，但是文本延伸到'li' – zachstarnes

@zachstarnes之外。但這並不影響你的情況。我在你的網站也嘗試過。 – Praveen

一旦我從'header nav ul ul ul'中刪除了'width：100％'，它就起作用了 – zachstarnes

下拉菜單的級別3沒有伸展到文本的寬度

回答

相關問題