CSS导航栏下拉问题

Question

我的下拉导航栏上的某些CSS有问题。 在下拉菜单中，我希望它的宽度与标准导航链接相同，并且位于其正下方，而不是像将鼠标悬停在“ Page2”上时所看到的那样稍微向右。 另外，为什么下拉导航链接的一半会变成白色，除非将鼠标悬停在该链接上。

这是我的小提琴 。

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> 

Answer 1

您在父级LI上定义的padding放弃了子级的对齐，只需将这两个规则添加到CSS（以取消应用于父级的padding）：

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

更新小提琴