title: how to remove overlapping lines in a css drop down menu
body: <p>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.</p>
  
  <p>html code:</p>
  
  <pre><code>    &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;meta name="" content=""&gt;
  &lt;link href="navCSS.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="wrapper"&gt;
  &lt;div id="navMenu"&gt;
  
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;link item&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;link item&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;link item&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;link item&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt; &lt;!--inner UL--&gt;
  &lt;/li&gt; &lt;!--main LI--&gt;
  &lt;/ul&gt; &lt;!--main UL--&gt;
  
  
  
  
  
  
  &lt;br class="clearFloat"&gt;
  
  &lt;/div&gt; &lt;!--navMenu-&gt;
  &lt;/div&gt; &lt;!-- wrapper --&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css code:</p>
  
  <pre><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;
  }
  </code></pre>