I am currently designing a navigation bar and I want to implement a feature where hovering over each link will display the box/background color without any space in between of Home, About Us, etc.
For reference, you can check out this example here: http://www.w3schools.com/css/css_navbar.asp, specifically the Demo for Navigation Bar. Thank you!
HTML CODE
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
CSS CODE
#MenuContainer {
width:441px;
float:right;
overflow:hidden;
text-align:right;
}
#MenuContainer #loginContainer {
width:441px;
float:left;
overflow:hidden;
}
#MenuContainer #MenulistContainer {
width:441px;
float:left;
overflow:hidden;
margin-top:12px;
}
#MenuContainer #MenulistContainer .menuList li {
list-style:none;
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
padding:0 0 0 10px;
}
#MenuContainer #MenulistContainer .menuList li a {
color:#000000;
text-decoration:none;
}
#MenuContainer #MenulistContainer .menuList li a:hover {
background-color:#003e7e;
text-decoration:#ffffff;
color:#ffffff;
padding: 0px;
list-style-type: none;
}