CSS导航栏下拉列表问题

Question

我的下拉导航栏上的某些css出现问题。在下拉列表中，我希望它与标准导航链接的宽度相同，并且直接位于其下方，而不是略微向右，因为当您将鼠标悬停在＆＃39; Page2＆＃39;上时，您可以看到。另外，为什么下拉导航链接的一半是白色的，除非你将鼠标悬停在它上面。

Here is my Fiddle

CSS / HTML / Demo

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您在父LIs上定义的填充正在抛弃子对齐，只需将这两个规则添加到CSS中（以取消应用于父代的填充）：

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

Updated Fiddle