HTML:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul><a href="#">Power tools</a></ul>
<ul><a href="#">Decorating</a></ul>
<ul><a href="#">Plumbing</a></ul>
<ul><a href="#">Electrical</a></ul>
<ul><a href="#">Lighting</a></ul>
<ul><a href="#">Tools</a></ul>
<ul><a href="#">More products...</a></ul>
</li>
<li><a href="#">Service</a>
<ul><a href="#">Handy man</a></ul>
<ul><a href="#">Key cutting</a></ul>
</li>
<li><a href="#">Contact us</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">More...</a></li>
</ul>
CSS:
li ul {
display:none;
}
li:hover ul {
display:block;
}
ul li {
list-style:none;
}
ul {
padding:0px;
margin:0px;
}
li {
float:left;
position:relative;
}
ul{
position: relative;
}
ul li a{
display:block;
padding: 25px;
background-color:white;
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* W3C */
text-decoration:none;
color: black;
font-family:arial bold;
border-bottom: 4px solid rgb(140, 0, 0);
}
ul li ul a {
display:block;
padding: 25px;
background-color:rgb(140,0,0);
background:rgb(140,0,0);
color: white;
font-family:arial bold;
border-bottom: 0px solid rgb(140, 0, 0);
}
JSFIDDLE: http://jsfiddle.net/r6Mzp/6/
How do I eliminate the extra space that appears when hovering over the main navigation bar link? When hovering over a link in the navigation bar, the drop-down will display but the original hovered link expands slightly from the right. How can I prevent the original link from expanding? Need help!