在我的下拉导航栏上遇到一些CSS问题。在下拉列表中，我希望它与标准导航链接的宽度相同，并且直接位于其下方，而不是像在“Page2”上悬停时看到的那样略微向右。另外为什么下拉导航链接的一半是白色的，除非你将它悬停在它上面。CSS导航栏下拉问题

Here is my Fiddle。

CSS/HTML /演示

nav { 
 
    width: 960px; 
 
    background-color: #3673a7; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    margin: auto; 
 
    border-radius: 5px; 
 
    -webkit-box-shadow: 2px 2px 1px 0px rgba(48, 50, 50, 0.81); 
 
    -moz-box-shadow: 2px 2px 1px 0px rgba(48, 50, 50, 0.81); 
 
    box-shadow: 2px 2px 1px 0px rgba(48, 50, 50, 0.81); 
 
} 
 
nav ul { 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 
nav ul li { 
 
    width: 65px; 
 
    display: inline-block; 
 
    padding: 0 30px 0 30px; 
 
    border-right: 1px solid #355e7f; 
 
    float: left; 
 
} 
 
nav ul ul { 
 
    display: none; 
 
} 
 
nav ul li:hover > ul { 
 
    display: block; 
 
} 
 
nav ul li:last-child { 
 
    border-right: none; 
 
} 
 
nav ul li:hover { 
 
    background-color: #3b8acc; 
 
} 
 
nav a:link, 
 
a:visited { 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
    font-size: 0.9em; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="index.html">Page 1</a> 
 
    </li> 
 
    <li><a href="#">Page 2</a> 
 
     <ul class="drop"> 
 
     <li><a href="#">Drop1</a> 
 
     </li> 
 
     <li><a href="#">Drop2</a> 
 
     </li> 
 
     <li><a href="#">Drop3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Page 3</a> 
 
    </li> 
 
    <li><a href="#">Page 4</a> 
 
    </li> 
 
    <li><a href="#">Page 5</a> 
 
    </li> 
 
    <li><a href="#">Page 6</a> 
 
    </li> 
 
    <li><a href="#">Page 7</a> 
 
    </li> 
 
    </ul> 
 
</nav>

来源

2014-09-30 Dianabolz

总是在自己的问题中包含代码，不要让我们去寻找它。 – 2014-09-30 23:56:59

会做，对不起。 – Dianabolz 2014-10-01 00:05:50

您已经父LIS定义的填充被扔落儿的比对，就这两个规则添加到您的CSS（以抵消正被施加到父母的填充）：

nav ul li ul { padding:0; } 
nav ul li ul li { padding:0; border:none; }

Updated Fiddle

来源

2014-09-30 23:06:20 APAD1

非常感谢:) – Dianabolz 2014-09-30 23:10:38

不客气！ – APAD1 2014-09-30 23:25:48

CSS导航栏下拉问题

回答

Updated Fiddle

相关问题