html - 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

您nav是 850 像素，但您的黑色背景 ( ul) 不是。

解决方法：nav改为设置黑色背景。

Answer 2

如果你想要它 100% 的容器宽度，只需将宽度分配ul为100%

Answer 3

<ul>不会自动填充 850 像素容器的宽度<div>。将<ul>宽度设置为 100% 即可。

ul {
    width: 100%;
}