Adjusting position of CSS drop down menu

Question

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.

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:

EDIT: Here's a jsfiddle. Thanks!

Screenshot

HTML

<div id="global_nav">
    <div class="container">
        <div class="nav">
            <ul id="category_nav" class="brand">
                <li class="first"><a href="http://www.google.com/brand/about/" title="About">About</a>

                    <ul>
                        <li class="first"><a href="http://www.google.com/brand/about/faq.html">Frequently asked questions</a>
                        </li>
                        <li><a href="http://www.google.com/brand/about/brand-team.html">Brand team</a>
                        </li>
                        <li class="last"><a href="http://www.google.com/brand/about/communicators.html">Unit communicators</a>
                        </li>
                    </ul>
                </li>
                <li><a href="http://www.google.com/brand/our-brand.html">Our brand</a>
                </li>
                <li><a href="http://www.google.com/brand/logo/" title="Logo">Logo</a>

                    <ul>
                        <li><a href="http://www.google.com/brand/logo/our-logo.html">Our logo</a>

                            <ul>
                                <li><a href="http://google.com">A sub item</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="http://www.google.com/brand/logo/secondary-signatures.html">Secondary signatures</a>

                            <ul>
                                <li><a href="http://google.com">Another subitem</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="http://google.coml">Unit ID</a>

                            <ul>
                                <li><a href="http://google.com">Another subitem</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
        </div>
        <!-- /div.nav -->
    </div>
    <!-- end .container -->
</div>
<!-- end #global_nav -->

** CSS **

#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 > 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;
}

Answer 1

I fixed part of the problem adding the left and top settings to this.

.nav ul li:hover ul li:hover > ul {display: block; left: 20px; top: 0px; }

you can change the values to move it where-ever you wish. The top 0 makes it stay right under the parent list item.

This jsfiddle shows it right under the parent list item, instead of more to the right, because I can't figure out how to get rid off the extra whitespace either.

Edit: Actually, try changing the position to absolute in the sub-items list like so:

.nav ul ul ul {
position: absolute;

Then you can change the left value above to wherever you want to be. fiddle