In the following css code the bottom and top borders appear to overlap which causes a thick line and I can't seem to figure out how to remove it. Any advice is 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;
}

```