悬停背景无法正确显示？

Question

我要实现这一点：

这是我实现的：LINK

当你将鼠标悬停在导航链接，白底蓝边的底部应该出现。它并不显得正确。为什么会发生？

标记：

<header> 
    <div> 
     <h1>CertsPlan</h1> 
     <section> 
      <ul> 
       <li><a href="javascript:void(0)">+ All Vendors</a></li> 
       <li> 
        <article id="header-cart"> 
         <img src="img/cart-icon.png" alt="Cart Icon"> 000 
        </article> 
       </li> 
       <li> 
        <article id="header-search"> 
          <form action="#"> 
           <input type="text" name="search" value="Exam Code"> 
          </form> 
         </article> 
       </li> 
       <li><a href="javascript:void(0)">Sign In/Register</a></li> 
      </ul> 
     </section> 
     <nav> 
      <ul> 
       <li><a href="index.html"><img src="img/home.png" alt="Home Icon"></a></li> 
       <li><a href="javascript:void(0)">Bundle</a></li> 
       <li><a href="javascript:void(0)">Faqs</a></li> 
       <li><a href="javascript:void(0)">Contact Us</a></li> 
      </ul> 
     </nav> 
    </div> 
</header> 

CSS：

/* Global Styles */ 
body { 
    border-top: 2px solid #ffffff; 
    background: #ffffff; 
    font-family: 'Arial', sans-serif; 
    color: #57616a; 
} 

p { 
    margin: 5px 0; 
    line-height: 25px; 
} 

strong { 
    font-weight: bold; 
} 

/* Section Styles */ 

/* Header */ 
header { 
    width:auto; 
    margin: 2 auto 0 auto; 
    background-color: #f7f7f7; 
    border-bottom: solid 5px #dedede; 
} 

header div { 
    width:auto; 
    max-width:1040px; 
    margin: auto; 
    overflow: hidden; 
} 

header h1 { 
    font-size: 30px; 
    font-weight: 400; 
    color: #2a323a; 
    font-family: 'PT Sans', sans-serif; 
    vertical-align: middle; 
    margin-top: 30px; 
    margin-bottom: 25px; 
    float:left; 
} 


/* Navigation */ 
nav { 
    float:right; 
    margin:none; 
} 

header ul { 
    list-style:none; 
    margin: 0; 
    overflow: hidden; 
} 

nav ul li { 
    display: block; 
    float: left; 
    margin-top: 38px; 
    margin-bottom: 35px; 
} 

nav ul li a { 
    font-family: 'PT Sans', sans-serif; 
    text-transform: uppercase; 
    font-size: 14px; 
    font-weight: 400; 
    color: #2a323a; 
    padding: 38px 20px 35px 20px; 
    text-decoration:none; 
} 

nav ul li a:hover { 
    background-color: #ffffff; 
    border-bottom: solid 5px #00acdd; 
} 

ul li a:active { 
    background-color: #ffffff; 
    border-bottom: solid 5px #00acdd !important; 
} 

/* Header top right area */ 

header section { 
    float:right; 
} 

header section li { 
    display:block; 
    float:right; 
    margin: 37px 0px 28px 7px; 
} 

header section a { 
    padding: 10px; 
    background: #31bbe2; 
    font-family: 'PT Sans', sans-serif; 
    font-size: 12px; 
    font-weight: 400; 
    color: #ffffff; 
    text-decoration:none; 
    border-radius: 5px; 
} 

Answer 1

您在两个父元素有overflow: hidden，隐藏边界之间的一切：（蓝色图片）

你蓝色的边框上a标签超出了父母的边界。

这里的解决方案：

1. 应该从header div删除overflow: hidden，并添加min-height: 89px。
2. 也从header ul删除overflow: hidden。
3. in nav ul li a将padding更改为：38px 20px 33px。

这就是全部。

编辑：

如果你想，即使你调整浏览器比nav之后添加div它的工作就像这样：

<nav> 
    [...] 
</nav> 
<div class="clear"></div> 

风格的为clear DIV：

.clear { 
    clear: both; 
    display: table; 
} 

Answer 2

只要改变你的CSS类

nav ul li a 
{ 
    font-family: 'PT Sans', sans-serif; 
    text-transform: uppercase; 
    font-size: 14px; 
    font-weight: 400; 
    color: #2a323a; 
    padding: 38px 20px 30px 20px; // This is where you are wrong 
    text-decoration: none; 
    height: 93px; 
} 

这是因为你已经在底部设置了太多的填充它不允许边界出现

它将工作

Answer 3

<style> 
    /* Global Styles */ 
body 
{ 
    border-top: 2px solid #ffffff; 
    background: #ffffff; 
    font-family: 'Arial', sans-serif; 
    color: #57616a;} 

p 
{ 
    margin: 5px 0; 
    line-height: 25px;} 

strong 
{ 
    font-weight: bold;} 

/* Section Styles */ 

/* Header */ 
header 
{ 
    width:auto; 
    margin: 2 auto 0 auto; 
    background-color: #f7f7f7; 
    border-bottom: solid 5px #dedede; 
    height: 93px; 
} 

header div { 
    width:auto; 
    max-width:60%; 
    margin: auto; 
    overflow: hidden; 
} 

header h1 
{ 
    font-size: 30px; 
    font-weight: 400; 
    color: #2a323a; 
    font-family: 'PT Sans', sans-serif; 
    vertical-align: middle; 
    margin-top: 30px; 
    margin-bottom: 25px; 
    float:left; 
} 


/* Navigation */ 
nav { 
    float:right; 
    margin:none; 
} 

header ul 
{ 
list-style:none; 
margin: 0; 
overflow: hidden; 
} 

nav ul li { 
    display: block; 
    float: left; 
    margin-top: 38px; 
    margin-bottom: 35px; 
} 

nav ul li a { 
    font-family: 'PT Sans', sans-serif; 
    text-transform: uppercase; 
    font-size: 14px; 
    font-weight: 400; 
    color: #2a323a; 
    padding: 38px 20px 35px 20px; 
    text-decoration:none; 
} 

nav ul li a:hover { 
    background-color: #ffffff; 
    border-bottom: solid 8px #00acdd; 
} 

ul li a:active {background-color: #ffffff; border-bottom: solid 5px #00acdd !important;} 

/* Header top right area */ 

header section { 
    float:right; 
} 

header section li { 
    display:block; 
    float:left; 
    margin: 37px 0px 28px 7px; 
} 

header section a { 
    padding: 10px; 
    background: #31bbe2; 
    font-family: 'PT Sans', sans-serif; 
    font-size: 12px; 
    font-weight: 400; 
    color: #ffffff; 
    text-decoration:none; 
    border-radius: 5px; 
} 
</style> 
<header> 
    <div> 
     <h1>CertsPlan</h1> 
     <section> 
      <ul> 
       <li><a href="javascript:void(0)">+ All Vendors</a></li> 

       <li> 
        <article id="header-search"> 
          <form action="#"> 
           <input type="text" name="search" value="Exam Code"> 
          </form> 
         </article> 
       </li> 
       <li> 
        <article id="header-cart"> 
         <img src="img/cart-icon.png" alt="Cart Icon"> 000 
        </article> 
       </li> 
       <li><a href="javascript:void(0)">Sign In/Register</a></li> 
      </ul> 
     </section> 
     <nav> 
      <ul> 
       <li><a href="index.html"><img src="img/home.png" alt="Home Icon"></a></li> 
       <li><a href="javascript:void(0)">Bundle</a></li> 
       <li><a href="javascript:void(0)">Faqs</a></li> 
       <li><a href="javascript:void(0)">Contact Us</a></li> 
      </ul> 
     </nav> 
    </div> 
</header>