I have created a menu with left and right borders to separate each item. When I hover over the menu, the background color changes to a lighter shade, which is the desired effect. However, the hover effect covers up the left border. How can I prevent the border from disappearing? I tried searching for a solution but couldn't find one. Thank you in advance.
Here is the HTML code:
<div id="header">
<div id="menu">
<ul>
<li><a href="index.html">HOME</a>
</li>
<li><a href="products.html">PRODUCTS</a>
</li>
<li><a href="videos.html">VIDEOS</a>
</li>
<li><a href="downloads.html">DOWNLOADS</a>
</li>
<li><a href="contact.html">CONTACT</a>
</li>
<li><a href="about.html">ABOUT</a>
</li>
</ul>
</div>
</div>
And the CSS code:
#header {
width:960px;
margin: 10px auto 5px auto;
background-color: #727272;
}
#menu {
max-width:828px;
bottom:0;
right:0;
font: 12px/18px sans-serif;
}
#menu a {
text-decoration: none;
display:block;
padding: 10px 32px;
color:#FFF;
}
#menu ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
#menu ul li {
display: inline-block;
margin-right: -4px;
position: relative;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
border-right: 1px solid #FFF;
}
#menu ul li:first-child {
border-left: 1px solid #FFF;
}
#menu ul li:hover {
background-color:#818181;
}