title: Adjusting position of CSS drop down menu
body: <p>I am trying to modify a CSS Tab w/dropdown menu to add another level of menu (don't ask why). I got it working, but I want the second drop down menu (the one with 'a sub item' in the screenshot) over to the right more. I'm thinking it should always appear at the end of whatever the item is.</p>
  
  <p>I have not been able to figure out where all the space on the top is coming from. I tried setting the margin to 0 and setting left:0 as well. Here's what I got:</p>
  
  <p><strong>EDIT:</strong> Here's a <a href="http://jsfiddle.net/2uZPv/" rel="nofollow">jsfiddle</a>. Thanks!</p>
  
  <p><a href="http://i.imgur.com/HF4HvNM.png" rel="nofollow" title="Screenshot">Screenshot</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="global_nav"&gt;
      &lt;div class="container"&gt;
          &lt;div class="nav"&gt;
              &lt;ul id="category_nav" class="brand"&gt;
                  &lt;li class="first"&gt;&lt;a href="http://www.google.com/brand/about/" title="About"&gt;About&lt;/a&gt;
  
                      &lt;ul&gt;
                          &lt;li class="first"&gt;&lt;a href="http://www.google.com/brand/about/faq.html"&gt;Frequently asked questions&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://www.google.com/brand/about/brand-team.html"&gt;Brand team&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="last"&gt;&lt;a href="http://www.google.com/brand/about/communicators.html"&gt;Unit communicators&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.google.com/brand/our-brand.html"&gt;Our brand&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://www.google.com/brand/logo/" title="Logo"&gt;Logo&lt;/a&gt;
  
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="http://www.google.com/brand/logo/our-logo.html"&gt;Our logo&lt;/a&gt;
  
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="http://google.com"&gt;A sub item&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://www.google.com/brand/logo/secondary-signatures.html"&gt;Secondary signatures&lt;/a&gt;
  
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="http://google.com"&gt;Another subitem&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="http://google.coml"&gt;Unit ID&lt;/a&gt;
  
                              &lt;ul&gt;
                                  &lt;li&gt;&lt;a href="http://google.com"&gt;Another subitem&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- /div.nav --&gt;
      &lt;/div&gt;
      &lt;!-- end .container --&gt;
  &lt;/div&gt;
  &lt;!-- end #global_nav --&gt;
  </code></pre>
  
  <p>** CSS **</p>
  
  <pre><code>#global_nav {height:38px; /* margin-top:20px; */}
  
  .nav {font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; display:block;}
  .nav ul {list-style: none; margin: 0; padding: 0; position: relative; }
  .nav ul li {float: left; /* position: relative; */ background:#fff; margin-right:1px; border-radius:4px 4px 0 0;}
  .nav ul li:hover,
  .nav ul li.hover {z-index: 1000000000000000000;}
  
  .nav ul a {text-decoration: none; display: block;   /* position: relative; */ padding: 10px; background:#eaebeb; color:#333; border-radius:5px 5px 0 0; }
  .nav ul a:hover,
  .nav ul a:focus,
  .nav ul a:active,
  .nav ul li.active a,
  .nav ul li.hover a {background:#fff; color:#900;}
  
  /* Dropdown */
  .nav ul ul {position: absolute; top: 38px; left: -9999em; width: 930px; /* overflow:hidden; */ padding:10px; background:#fff; border-radius:0 0 5px 5px; box-shadow:0 3px 3px rgba(0,0,0,0.3);}
  .nav ul li:hover ul,
  .nav ul li.hover ul {left: 0;}
  .nav ul ul li {float: none; position: static; padding:0; margin:0 0 .5em 0;}
  .nav ul li:hover ul a,
  .nav ul li.hover ul a {text-shadow: none; margin-top: -1px; /* collapses top border */ padding:0; color:#0e4e8e; line-height:1.2; background:transparent; }
  .nav ul li:hover ul a:hover,
  .nav ul li.hover ul a:hover,
  .nav ul li.hover ul a:focus,
  .nav ul li.hover ul a:active {color:#900;}
  
  
  .nav ul ul ul {position: relative;  width: 930px; margin-top:0; /* overflow:hidden; */ display:none; /*padding:10px;*/ background:#fff; border-radius:0 0 5px 5px;box-shadow:0 3px 3px rgba(0,0,0,0.3);}
  .nav ul li:hover ul li:hover &gt; ul {display: block; }  
  .nav ul ul ul li.hover {z-index: 2000000000000000000;}
  .nav ul li ul li ul li a {whitewhite-space: nowrap; line-height:25px;}  
  
  
  .nav ul li + ul {
    float: left;
    /* margin-bottom: 1em; */
    margin-right: 20px;
    /* min-height: 100px; */
    overflow: hidden;
    width: 150px;
  }
  </code></pre>