Question

我知道我一直在问很多问题而且你们都很棒。我的Nav有两个问题。

1）首先，资产净值并非全程。 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;，它横跨整个宽度。这也应该修复“Photo Credit”链接。

Answer 2

从display: inline-table;中删除nav ul。这应该解决这两个问题。：）

CSS导航栏不跨越全长

2 个答案: