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。