When looking at the following CSS code, I noticed that the bottom and top borders seem to overlap, creating a thick line. I'm having trouble figuring out how to remove it. Any suggestions or advice would be greatly appreciated. Thank you!
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<link href="navCSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="navMenu">
<ul>
<li><a href="#">Products</a>
<ul>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
<li><a href="#">link item</a></li>
</ul> <!--inner UL-->
</li> <!--main LI-->
</ul> <!--main UL-->
<br class="clearFloat">
</div> <!--navMenu->
</div> <!-- wrapper -->
</body>
</html>
CSS Code:
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
/*removes the bullet point*/
list-style:none;
float:left;
position:relative;
background: #fff;
}
/*for top level */
#navMenu ul li a{
text-align:center;
font-family:"calibri";
text-decoration:none; /*remove underline*/
/*height width for all links*/
height:30px;
width:150px;
display:block;
border: 1px solid #ccc;
color: #777;
}
/* hiding inner ul*/
#navMenu ul ul{
position:absolute;
visibility:hidden;
/*must match height of ul li a*/
top:32px;
}
/*selecting top menu to display the submenu*/
#navMenu ul li:hover ul{
visibility:visible;
}
#navMenu li:hover{
background-color: #F9F9F9;
}
#navMenu ul li:hover ul li a:hover{
color: E2144A;
}
#navMenu ul li a:hover{
color: E2144A;
}