html - CSS 导航栏不跨越全长

Question

我知道我问了很多问题，你们都很棒。我的导航有两个问题。

1) 首先，NAV 并没有跨越整个路径。 2) 无论出于何种原因，在“服务”下，下拉列表的长度足以容纳所有链接，但在“关于我们”下，“图片来源”却没有。

这是链接: http://matthewtbrown.com/jeffandcricketquilt/index2.html

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>元素实际上跨越了整个宽度，但是 nav ul不是。

删除 display: inline-table;它横跨整个宽度。这也应该修复“图片来源”链接。