I have a goal in mind:
This is the outcome I've achieved so far: LINK
My aim is to have a white background with a blue border appear at the bottom when hovering over navigation links. Unfortunately, this isn't happening as expected. Can anyone provide insight into why this might be?
Please refer to the Markup and CSS code below:
<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 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;
}
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;
}