title: CSS Drop-down menu alignment problems
body: <p>I am having some issues wrapping my head around this problem. Basically I have created a drop down menu and I can't get it to position correctly. I have the background in blue and the menu background in black so you can see how it comes over the bottom of my blue background. I want the black to be centered in the blue as well it would be nice if I could get some help centering the text in the middle of the menu without having to resort to line-height.</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/mzz2u/" rel="nofollow">http://jsfiddle.net/mzz2u/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="nav"&gt;
  
  
  &lt;ul id="main-nav"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Apparel&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Gloves&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Punching Bags&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Protection&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Accessories&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Wholesales&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Equipment Catalogue&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Wholesale Inqueries&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Direct Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;YouTube Channel&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;LinkedIn Page&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Facebook Page&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>#nav {
  background-color: #004f99;
  height: 40px;
  vertical-align: text-middle;
  }
  #main-nav,
  #main-nav ul {
  list-style: none;
  }
  #main-nav {
  float: left;
  background-color: #000000;
  }
  #main-nav &gt; li {
  float: left;
  height: 40px;
  }
  #main-nav li a {
  display: block;
  width: 100px;
  height: 40px;
  line-height: 2.0em;
  text-decoration: none;
  }
  #main-nav ul {
  position: absolute;
  display: none;
  z-index: 999;
  }
  #main-nav ul li a {
  width: 150px;
  }
  #main-nav li:hover ul {
  display: block;
  }
  /* Main menu
  ------------------------------------------*/
  #main-nav {
  font-family: Arial;
  font-size: 12px;
  background-image: url('../images/menubg.jpg');
  }
  #main-nav &gt; li &gt; a {
  color: #ffffff;
  font-weight: bold;
  }
  #main-nav &gt; li:hover &gt; a {
  color: #888888;
  background-color: #ff0000;
  }
  
  /* Submenu
  ------------------------------------------*/
  #main-nav ul {
  background-color: #111111;
  }
  #main-nav ul li a {
  color: #ffffff;
  }
  #main-nav ul li:hover a {
  background: #888888;
  }
  </code></pre>