CSS導航欄下拉問題

Question

在我的下拉導航欄上遇到一些CSS問題。在下拉列表中，我希望它與標準導航鏈接的寬度相同，並且直接位於其下方，而不是像在「Page2」上懸停時看到的那樣略微向右。另外爲什麼下拉導航鏈接的一半是白色的，除非你將它懸停在它上面。

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>

Answer 1

您已經父LIS定義的填充被扔落兒的比對，就這兩個規則添加到您的CSS（以抵消正被施加到父母的填充）：

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

Updated Fiddle