title: Horizontal Menu/List alignment issue
body: <p>this is my first post to stackoverflow, but I use you guys knowledge constantly, so thanks!</p>
  
  <p>I'm having an issue with menu alignment. I have a wordpress menu that I added divs inside the li element so that I could have a first/middle/last componant for each menu. This is so that I can have the current menu state raised up with the first and last items being "endcaps". Hard to explain, you can see it here: <a href="http://clarksvillevet.com/new/" rel="nofollow">http://clarksvillevet.com/new/</a> </p>
  
  <p>Notice how the middle of the current menu item "sinks"? I cannot figure out what I'm missing here. I thought it was the line height, but that only moves it a bit. I'm guessing something is overlapping on the css (kinda calling it twice if you know what I mean), but again, no idea. Here is the HTML generated:</p>
  
  <pre><code>&lt;div id="main-menu"&gt;
  &lt;ul id="menu-main-menu" class="menu"&gt;
  &lt;li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8"&gt;
  &lt;li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-23"&gt;
  &lt;div class="first"&gt;&lt;/div&gt;
  &lt;div class="middle"&gt;
  &lt;a href="http://clarksvillevet.com/new/about-southside-va-veterinary-hospital/" title="About Southside Virginia’s Best Veterinary Hospital"&gt;About&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="last"&gt;&lt;/div&gt;
  &lt;/li&gt;
  &lt;li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"&gt;
  &lt;li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"&gt;
  &lt;li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"&gt;
  &lt;li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS</p>
  
  <pre><code>#main-menu{
  width: 598px;
  height: 51px;
  margin: -6px 0px 0px;
  z-index:401;
  float: left;
  background:url('images/BG-Menu.png') no-repeat top left transparent;
  }
  
  .menu {
  list-style-type:none;
  list-style-position:outside;
  list-style-image:none;
  position:relative;
  z-index:300;
  width: 598px;
  height: 51px;
  float: left;
  line-height: 57px;
  }
  
  .menu ul{
  position:absolute;
  line-height: 57px;
  overflow:hidden;
  margin:0px;
  padding:0px;
  top: 51px;
  left:0px;
  display: none;
  list-style-position:outside;
  }
  
  .menu a {
  display:block;
  display:inline-block;
  padding:0px;
  text-decoration:none;
  letter-spacing: 1px;
  font-size: 13px;
  color: #dddddd;
  margin: 0px;
  }
  
  .menu .first, .menu .middle, .menu .last {
  position: relative;
  padding:0px;
  display: inline-block
  }
  
  .menu .first, .menu .last{
  width: 11px;
  height: 51px;
  margin: 0px;
  padding: 0px;
  }
  
  .menu .middle {
  height:51px;
  margin: 0px;
  padding: 0px;
  }
  
  .menu a:hover {
  color:#ffffff;
  background-color:transparent;
  }
  
  .menu li {
  float:left;
  position:relative;
  }
  
  
  .menu ul a:hover {
  color:#ffffff;
  }
  
  .menu li ul a {
  width: 250px;
  height: 32px;
  float:left;
  line-height: 30px;
  background: url('images/BG-Drop-Menu.png') no-repeat top left transparent;
  padding: 0px 0px 0px 20px;
  color: #ffffff;
  }
  
  .menu li ul a:hover{
  background: url('images/BG-Drop-Menu-Hover.png') no-repeat top left transparent;
  }
  
  .menu li ul ul {
  left:0em;
  margin:0px 0 0 10px;
  }
  
  .menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul {
  display:none;
  }
  
  .menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul{
  display:block;
  }
  
  .current-menu-item .first{
  background:url('images/BG-Menu-Current-A.png') no-repeat top left transparent;
  }
  
  .current-menu-item .middle{
  background:url('images/BG-Menu-Current-B.png') repeat-x top left transparent;
  }
  
  .current-menu-item .last{
  background:url('images/BG-Menu-Current-C.png') no-repeat top left transparent;
  }
  
  .current-menu-item{
  line-height: 51px;
  }
  </code></pre>
  
  <p>There is also a dropdown menu, so when you see the .menu ul display:none , that is what its for... Feel free to correct any craziness you may see! Thanks!</p>