HTML/CSS - Navbar Dropdown UL not inline

Question

我正在嘗試爲即將推出的項目設計一個導航欄，我非常喜歡我採用的水平下拉方法，而不是我通常使用的垂直下拉菜單。它看起來不錯，除了那裏似乎只有一個問題。當你將鼠標懸停在「新聞」按鈕上（JSFiddle在下面）時，你會發現第三個選項只是移動到下一行，而我不能爲了我的生活找出導致這種情況發生的原因。 CSS中是否有錯誤，或者我使用了一些錯誤的標籤？謝謝你，這裏是代碼的一個例子：

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
     html { 
      color:#ededed; 
      background-color:#4d4c4c; 
     } 
     #wrap { 
      width:1000px; 
      margin:auto; 
     } 
     #div { 
      width:1000px; 
      height:100%; 
      background-color:#252525; 
      border-radius:5px; 
      box-shadow:0px 0px 8px black; 
      border:2px groove #353535; 
      margin:auto; 
      clear:both; 
     } 
     #header { 
      height:150px; 
      width:300px; 
      background-color:red; 
      margin-bottom:5px; 
     } 
      nav { 
       margin-left: auto; 
       margin-right:auto; 
       text-align: left; 
       background-color:#222222; 
       margin-bottom:10px; 
       width:1000px; 
       height:50px; 
       border:1px inset #131313; 
       border-radius:5px; 
       box-shadow:2px 2px 8px black; 
      } 
      nav ul ul { 
       display: none; 
      } 

      nav ul li:hover > ul { 
       display: block; 
      } 
      nav ul li ul li:hover { 
      } 
      nav ul { 
       list-style: none; 
       position: relative; 
       display: inline-block; 
       font-size:12px; 
       font-family:Arial, Helvetica, sans-serif; 
       font-weight:bold; 
       height:50px; 
       line-height:400%; 
       text-shadow: 
       -1px -1px 0 #090909, 
       1px -1px 0 #090909, 
       -1px 1px 0 #090909, 
       1px 1px 0 #090909, 
       2px 2px 3px black; 
      } 
      nav ul:after { 
       content: ""; 
       clear: both; 
       display: block; 
      } 
      nav ul li { 
       float: left; 
       height:50px; 
       padding-left:10px; 
       padding-right:10px; 

      } 

      nav ul li a { 
       display: block; 
       padding: 25px 40px; 
       color: #757575; 
       text-decoration: none; 
      } 
      nav ul ul { 
       border-radius: 4px; 
       padding: 0; 
       position: absolute; 
       top: 100%; 
       height:30px; 
       margin-top:-10px; 
       margin-left:-6px; 
       line-height:210%; 
       background-color:#252525; 
       border:1px solid black; 
       box-shadow:2px 2px 8px black; 
      } 
      nav ul ul li { 
       float: left; 
       color:white; 
       position: relative; 
       text-align:center; 
       height:30px; 
       padding-left:5px; 
       padding-right:5px; 
       border-radius:4px; 
      } 
      nav ul ul li a { 
       padding: 15px 40px; 
       color: #fff; 
      } 
      nav ul ul li a:hover { 
       background: #848788; 
      } 
      nav ul ul ul { 
       position: absolute; top:0; margin-top:30px; margin-left:-5px; line-height:210%; background-color:#252525; border:1px solid black; box-shadow:2px 2px 8px black;8 
      } 
      nav ul li:hover { 
       cursor:pointer; 
       color:#2967ed; 
       background-color:#333333; 
       border-radius:3px; 
       text-shadow:2px 2px 5px black; 
      } 
nav ul ul ul li { 
    color:white; 
} 
nav li:last-child:after { 
content: none; 
} 
.space { 
    border-left:1px inset #333333; border-right:1px inset #333333; width:1px; height:100%; padding-left:0; padding-right:0 
} 
#left { 
    float:left; 
    width:69%; 
    height:99%; 
    background-color:white; 
    margin:5px; 
} 
#right { 
    float:left; 
    width:29%; 
    height:99%; 
    margin:5px; 
} 

      <nav> 
       <ul> 
        <li>Home<img src="images/arrow.png" style="padding-left:5px"> 
         <ul> 
          <li>Choice One<img src="images/arrow.png" style="padding-left:5px"> 
           <ul> 
            <li>TEST</li> 
           </ul> 
          </li> 
          <li class="space"></li> 
          <li>Choice Two<img src="images/arrow.png" style="padding-left:5px"> 
           <ul> 
            <li>Third</li> 
           </ul> 
          </li> 
          <li class="space"></li> 
          <li>Choice Three</li> 
         </ul> 
        </li> 
        <li class="space"></li> 
        <li>News<img src="images/arrow.png" style="padding-left:5px"> 
         <ul> 
          <li>News Page One</li> 
          <li class="space"></li> 
          <li>Second News</li> 
          <li class="space"></li> 
          <li>A Third News</li> 
         </ul> 
        </li> 
        <li class="space"></li> 
        <li>Forums</li> 
        <li class="space"></li> 
        <li>About</li> 
        <li class="space"></li> 
        <li>Contact</li> 
        <li class="space"></li> 
       </ul> 
      </nav> 

Navbar JSFiddle

Answer 1

只需從父ul刪除display:inline-block。

這是限制孩子的寬度ul元素的寬度父。因此，當孩子的寬度超過父母的寬度時;它將打破新的路線。

jsFiddle example

nav ul { 
    display:inline-block; /* Simply remove this.. easy. */ 
} 

Answer 2

您的問題是，你的第一個UL ..含有頂部的所有環節的一個設置爲300像素的

的寬度，當你有下拉菜單出現，他們需要不會比這更大，否則他們會破壞並給你帶來不良影響。

在你的例子中，因爲第三項是如此之長，它迫使包含ul大於300px。

我剛剛將父ul更改爲更大（500 px），但您可以看到爲什麼此模型可能會給您一些問題。

ul{width:500px;} 

http://jsfiddle.net/p2ysY/