CSS導航欄沒有跨越

Question

如何讓我的導航欄跨越我的網頁？我已將它設置爲850px。容器div設置爲850px。

這裏的鏈接和代碼： http://matthewtbrown.com/jeffandcricketquilt/index2.html

nav { 
width:850px; 
} 
nav li { 
       font-family: 'bitterregular'; 
       font-size:16px; 
      } 
    nav ul { 
       background: #000; /* Old browsers */ 
       list-style: none; 
       position: relative; 
       display: inline-table; 
      } 
    nav ul:after { 
       content: ""; clear: both; display: block; 
      } 
    nav ul ul { 
       display: none; 
      } 

    nav ul li:hover > ul { 
       display: block; 
      } 
    nav ul li { 
       float: left; 
       color:#fff; 
      } 

    nav ul li:hover a { 
       color:#FFF; 
      } 
    nav ul li a { 
       display: block; 
       padding: 10px 40px; 
       color:#FFF; 
       text-decoration: none; 
      } 
    nav ul ul { 
       background: #FFF; 
       border-radius: 0px; 
       padding: 0; 
       position: absolute; 
       top: 100%; 
      } 
    nav ul ul li { 
       float: none; 
       border-top: 1px solid #444; 
       border-bottom: 1px solid #444; 
       border-color:#FFF;     
       position: relative; 
       background-color:#000; 
       font-size:12px; 
      } 
    nav ul ul li a { 
       padding: 8px 40px; 
       color:#FFF;    } 
    nav ul ul li a:hover { 
       background-color:#000; 
       color:#999; 
           } 
    nav ul li a:hover { 
       background-color:#000; 
       color:#999; 
           } 
    nav ul ul ul { 
       position: absolute; left: 100%; top:0; 
      } 

Answer 1

<ul>不會自動填充850像素容器的寬度<div>。將<ul>寬度設置爲100％，它會。

ul { 
    width: 100%; 
} 

Answer 2

如果有它的容器的寬度的100％就是你只想指定的ul寬度爲100%

Answer 3

你nav是850px，但是你的黑色背景（ul）不是。

解決方法：改爲將黑色背景設置爲nav。