Настройка положения выпадающего меню CSS

Question

Я пытаюсь изменить вкладку CSS с выпадающим меню, чтобы добавить еще один уровень меню (не спрашивайте, почему). Я получил его работу, но я хочу, чтобы второе выпадающее меню (одно с «подэлементом» на скриншоте) снова направо. Я думаю, он всегда должен появляться в конце того, что есть.

Я не смог выяснить, откуда все пространство сверху. Я попытался установить маржу на 0 и установить влево: 0. Вот что я получил:

EDIT: Вот jsfiddle. Благодаря!

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

Я исправил часть проблемы добавления верхнего и левого края настройки для этого.

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

вы можете изменить значение, чтобы переместить его там, где когда-либо вы хотите. Верхняя 0 делает его оставаться под элементом родительского списка.

Это jsfiddle показывает это прямо под родительским элементом списка, а не справа, потому что я не могу понять, как избавиться от лишних пробелов.

Edit: На самом деле, попробуйте изменить положение к абсолютному в списке подпунктов следующим образом:

.nav ul ul ul { 
position: absolute; 

Затем вы можете изменить значение левого выше, где вы хотите быть. fiddle