title: CSS Dropdown menu issues, vertical align
body: <p>im trying to horizontally and vertically align my top anchor tags in my list.
  <a href="http://jsfiddle.net/Hk7HC/" rel="nofollow">http://jsfiddle.net/Hk7HC/</a></p>
  
  <p>But I'm having a nightmare trying to do it. Also my drop down to the right of 'Advantages of listing' jumps up to the top of the list..arghh! Any help would be greatly appreciated :)</p>
  
  <pre><code> &lt;div id = "menu"&gt;
          &lt;ul id="nav"&gt;
              &lt;li class="rhombusStart"&gt;&amp;nbsp;&lt;/li&gt;
              &lt;li class="rhombus"&gt;&lt;a class="rhlink" href="#"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="rhombus"&gt;&lt;a class="rhlink" href="#"&gt;&lt;span&gt;Market &lt;br&gt; Update&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="rhombus"&gt;&lt;a class="rhlink" href="#"&gt;&lt;span&gt;Membership&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="rhombus"&gt;&lt;a class="rhlink" href="#"&gt;&lt;span&gt;FISC Info&lt;/span&gt;&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a class="linkchild" href="#"&gt;About the FISC&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class="linkchild" href="#"&gt;International&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class="linkchild" href="#"&gt;&lt;img class = "arrow" src="Images/arrow.png" alt="&amp;#9658;"&gt;Advantages of listing&lt;/a&gt; 
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a class="linkchild" href="#"&gt;Advantages of Listing&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a class="linkchild" href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a class="linkchild" href ="#"&gt;Links&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="rhombus"&gt;&lt;a class="rhlink" href="#"&gt;&lt;span&gt;Contact Us&lt;/span&gt;&lt;/a&gt;
                   &lt;ul&gt;
                      &lt;li&gt;&lt;a class="linkchild" href="#"&gt;About US&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a class="linkchild" href="#"&gt;Details&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class="linkchild" href="#"&gt;Location&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="rhombusEnd"&gt;&amp;nbsp;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  
  /*******************************************
   Menu Styling
  *******************************************/
  #menu {
      margin: 0 auto;
      padding-left: 2%;
      width: 1024px;
      height: 3.5em;
      position: relative;
      top: 0;
      background-color: rgb(255,194,14);
      border: 1px solid rgb(140,51,61)
  }
  #nav {
       margin:0;
       padding:0;
       list-style-type:none;
       list-style-position:outside;
       position:relative;
       height:3.5em;
       background-color: rgb(255,194,14);
       display: table;
  }
  
  #nav ul {
       margin:0;
       padding:0;
       list-style-type:none;
       list-style-position:outside;
       position:relative;
       background-color: rgb(255,194,14);
  }
  
  #nav a.linkchild:link,
  #nav a.linkchild:active,
  #nav a.linkchild:visited {
      display:block;
      padding:0px 5px;
      text-decoration:none;
      background: #b95d73; /* Old browsers */
      color: white;
  }
  
  #nav a.rhlink:link, #nav a.rhlink:active, #nav a.rhlink:visited {
      display: block;
      padding: 0px 5px;
      text-decoration: none;
      color: inherit;
  }
  
  #nav li.rhombus:hover {
      background: #b95d73;
      color: white;
      text-decoration: none;
  }
  
  #nav a.linkchild:hover {
     background: rgb(118,0,18);
     color: white;
  }
  
  #nav &gt; li {
      float:left;
      position:relative;
  }
  
  #nav &gt; li.rhombus {
      float:left;
      position: relative;
      -webkit-transform-origin:0 0;
      -moz-transform-origin:0 0;
      -ms-transform-origin:0 0;
      -o-transform-origin:0 0;
      transform-origin:0 0;
      -webkit-transform:skew(35deg);
      -moz-transform:skew(35deg);
      -ms-transform:skew(35deg);
      -o-transform:skew(35deg);
      transform:skew(35deg);
      border-right: 1px solid rgb(239,89,24);
      border-left: 1px solid rgb(255,244,80);
      background-color: rgb(255,194,14);
      font-family: Georgia;
      color: rgb(131,0,26);
      width: 8em;
      text-align: center;
      height: 3.5em;
  }
  #nav &gt; li.rhombusStart {
      float:left;
      position: relative;
      -webkit-transform-origin:0 0;
      -moz-transform-origin:0 0;
      -ms-transform-origin:0 0;
      -o-transform-origin:0 0;
      transform-origin:0 0;
      -webkit-transform:skew(35deg);
      -moz-transform:skew(35deg);
      -ms-transform:skew(35deg);
      -o-transform:skew(35deg);
      transform:skew(35deg);
      border-right: 1px solid rgb(239,89,24);
      background-color: rgb(255,194,14);
      width: 1em;
      height: 3.5em;
  
  }
  #nav &gt; li.rhombusEnd {
      float: left;
      position: relative;
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: skew(35deg);
      -moz-transform: skew(35deg);
      -ms-transform: skew(35deg);
      -o-transform: skew(35deg);
      transform: skew(35deg);
      border-left: 1px solid rgb(255,244,80);
      background-color: rgb(255,194,14);
      width: 1em;
      height: 3.5em;
  }   
  
  li.rhombus &gt; a span {
      -webkit-transform:skew(-35deg);
      -moz-transform:skew(-35deg);
      -ms-transform:skew(-35deg);
      -o-transform:skew(-35deg);
      transform:skew(-35deg);
  
      text-decoration: none;
      vertical-align: middle;
      display: table-cell;     
   }
  
  li.rhombus &gt; ul {
      -webkit-transform-origin:0 0;
      -moz-transform-origin:0 0;
      -ms-transform-origin:0 0;
      -o-transform-origin:0 0;
      transform-origin:0 0;
      -webkit-transform:skew(-35deg);
      -moz-transform:translate(0,1px) skew(-35deg);
      -ms-transform:skew(-35deg);
      -o-transform:skew(-35deg);
      transform:skew(-35deg);
  }
  
  #nav ul {
      position:absolute;
      top:3.5em;
      left:0;
      width:15em;
      display:none;
  }
  
  #nav li ul a {
      width:15em;
      float:left;
      border-bottom: 1px, solid, rgb(145,0,34);
      border-top: 1px, solid, rgb(178,77,101);
      display: block;
      line-height: 2em;
      text-align: left;
      display: table-cell; 
  }
  
  #nav ul ul {
      top:auto;
  }
  
  #nav li ul ul {
      left:15em;
      margin:0px 0 0 10px;
  }
  
  #nav li:hover ul ul,
  #nav li:hover ul ul ul,
  #nav li:hover ul ul ul ul {
      display:none;
  }
  
  #nav li:hover ul,
  #nav li li:hover ul,
  #nav li li li:hover ul,
  #nav li li li li:hover ul {
      display:block;
  }
  
  img.arrow 
  {
      float: right;
      vertical-align: middle;
  }
  </code></pre>