Question

Ok, I'm using Drupal's main-menu and it's rendering very awkward. I've compared Drupal's rendered markup/css to my HTML comp's and they're structurally the same and receiving the same styles. I disabled Drupal's system.main.css. Anyway here's the nitty gritty.

We'll start with the CSS both files are referencing:

/* Main Navigation */
nav#main-nav {
width: 100%;
}
nav#main-nav > ul {
display: block;
position: relative;
list-style: none;
font-weight: 400;
list-style-image: none;
padding: .4em 0;
overflow: visible;
background: rgb(219,227,236); 
background: -moz-linear-gradient(top, rgba(219,227,236,1) 10%, rgba(255,255,255,1) 50%, rgba(219,227,236,1) 90%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(219,227,236,1)), color-stop(50%,rgba(255,255,255,1)), color-stop(90%,rgba(219,227,236,1)));
background: -webkit-linear-gradient(top, rgba(219,227,236,1) 10%,rgba(255,255,255,1) 50%,rgba(219,227,236,1) 90%); 
background: -o-linear-gradient(top, rgba(219,227,236,1) 10%,rgba(255,255,255,1) 50%,rgba(219,227,236,1) 90%);
background: -ms-linear-gradient(top, rgba(219,227,236,1) 10%,rgba(255,255,255,1) 50%,rgba(219,227,236,1) 90%); 
background: linear-gradient(top, rgba(219,227,236,1) 10%,rgba(255,255,255,1) 50%,rgba(219,227,236,1) 90%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbe3ec', endColorstr='#dbe3ec',GradientType=0 );
}

nav#main-nav > ul > li {
display: inline-block;
padding: 0 1.12em;
position: relative;
}
nav#main-nav > ul > li:not(:last-child) {
border-right: 1px solid #d1d1d1;
}
nav#main-nav > ul > li > ul {
visibility: hidden;
opacity: 0;
width: 150px;
min-width: 100%;
border-left: 1px solid #d1d1d1;
border-right: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
font-size: .8em;
line-height: 1em;
-webkit-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
-moz-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
-ms-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
-o-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background: -moz-linear-gradient(top, rgba(255,255,255,0.95) 0%, rgba(219,227,236,0.95) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.95)), color-stop(100%,rgba(219,227,236,0.9))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.95) 0%,rgba(219,227,236,0.95) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0.95) 0%,rgba(219,227,236,0.95) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0.95) 0%,rgba(219,227,236,0.95) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,0.95) 0%,rgba(219,227,236,0.95) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ffffff', endColorstr='#e6dbe3ec',GradientType=0 ); /* IE6-9 */

}
nav#main-nav > ul > li:hover > ul {
visibility: visible;
opacity: 100;
-webkit-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
-moz-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
-ms-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
-o-transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); 
transition: all 500ms cubic-bezier(0.250, 0.100, 0.250, 1.000); /* ease (default) */
}
nav#main-nav > ul > li > ul > li {
display: block;
padding: 0 1.1em 1em 1.1em;
}
nav#main-nav > ul > li > ul > li:first-child {
padding-top: 1em;   
}
nav#main-nav > ul > li > ul > a {
display: block;
width: 100%;
height: 100%;
}
.left {
position: absolute;
top: 1.85em;
left: 0;
}
.right {
position: absolute;
top: 1.85em;
right: 0;
}

The markup from the static HTML comp:

<nav id="main-nav">
<ul>
  <li><a href="#">why company?</a>
    <ul class="sub left">
      <li><a href="#">client testimonials</a></li>
      <li><a href="#">trader testimonials</a></li>
    </ul>
  </li>
  <li><a href="#">our products</a>
    <ul class="sub left">
      <li><a href="#">Product&trade;</a></li>
      <li><a href="#">Product&trade;</a></li>
      <li><a href="#">Product&trade;</a></li>
      <li><a href="#">Product&trade;</a></li>
      <li><a href="#">Product&trade;</a></li>
      <li><a href="#">Product</a></li>
      <li><a href="#">Where to find our products</a></li>
    </ul>
  </li>
  <li><a href="#">online-broker resources</a>
    <ul class="sub left">
      <li><a href="#">product tutorials</a></li>
      <li><a href="#">educational videos</a></li>
      <li><a href="#">product briefs</a></li>
      <li><a href="#">whitepapers</a></li>
      <li><a href="#">webinars</a></li>
      <li><a href="#">case studies</a></li>
    </ul>
  </li>
  <li><a href="#">traders resources</a>
    <ul class="sub left">
      <li><a href="#">product tutorials</a></li>
      <li><a href="#">educational videos</a></li>
      <li><a href="#">getting started guides</a></li>
      <li><a href="#">whitepapers</a></li>
      <li><a href="#">FAQs</a></li>
    </ul>
  </li>
  <li><a href="#">market professionals</a>
    <ul class="sub left">
      <li><a href="#">technical checkpoint</a></li>
      <li><a href="#">other BBG</a></li>
    </ul>
  </li>
  <li><a href="#">about us</a>
    <ul class="sub right">
      <li><a href="#">corporate overview</a></li>
      <li><a href="#">management team</a></li>
      <li><a href="#">board of directors</a></li>
      <li><a href="#">investor relations</a></li>
      <li><a href="#">careers</a></li>
      <li><a href="#">partners</a></li>
    </ul>
  </li>
  <li><a href="#">news</a>
    <ul class="sub right">
      <li><a href="#">press releases</a>
      <li><a href="#">digital media</a></li>
      <li><a href="#">in the news</a></li>
      <li><a href="#">archive</a></li>
      <li><a href="#">events</a></li>
    </ul>
  </li>
</ul>

This is the screenshot of how this markup renders (I blurred the company's name and product names):

screenshot

Here's the markup Drupal is rendering. (It prints styles that have nothing to reference to in the css so they should be benign)

<nav id="main-nav">
  <ul class="menu">
    <li class="first leaf">
    <a href="#" title="Why choose?" class="active">why company</a></li>
    <li class="expanded"><a href="/comapany/products">our products</a>
      <ul class="menu">
        <li class="first leaf"><a href="/comapany/node/8">Product</a></li>
        <li class="leaf"><a href="/comapany/node/9">Product</a></li>
        <li class="leaf"><a href="/comapany/node/10">Product</a></li>
        <li class="leaf"><a href="/comapany/node/11">Product</a></li>
        <li class="leaf"><a href="/comapany/node/12">Product</a></li>
        <li class="leaf"><a href="/comapany/node/14">Product</a></li>
        <li class="leaf"><a href="/comapany/node/13">Product</a></li>
        <li class="last leaf"><a href="/comapany/node/15">Product</a></li>
      </ul>
    </li>
  <li class="leaf"><a href="/comapany/" title="Resources for online brokers." class="active">online-broker resources </a></li>
  <li class="leaf"><a href="/comapany/" title="Resources for traders" class="active">traders resources</a></li>
  <li class="leaf"><a href="/comapany/" title="Market professional resources" class="active">market professionals</a></li>
  <li class="expanded"><a href="/comapany/about" title="About comapany">about us</a>
    <ul class="menu">
      <li class="first leaf"><a href="/comapany/node/1" title="corporate overview">corporate overview</a></li>
      <li class="leaf"><a href="/comapany/management" title="management team">management team</a></li>
      <li class="leaf"><a href="/comapany/board" title="board of directors">board of directors</a></li>
      <li class="leaf"><a href="/comapany/investors" title="investor relations">investor relations</a></li>
      <li class="leaf"><a href="/comapany/partners" title="Partners">partners</a></li>
      <li class="last leaf"><a href="/comapany/careers" title="careers">careers</a></li>
    </ul>
  </li>
  <li class="last leaf"><a href="/comapany/" title="comapany announcements and press coverage." class="active">news</a></li>
  </ul>
</nav>

And an image of Drupal's rendering: http://i35.photobucket.com/albums/d194/dv8withn8/indrupal.jpg

I've been beating my head against this and can't determine what Drupal is doing. I've been in firebug turning styles on and off, removing references to any scripts or other stylesheets.

I've even tried assigning a height to the parent UL and while this works at constraining it, whenever the child menu's are displayed, it pushes down all the other root menu items to be in line with the bottom of the child ul.