html - 调整CSS下拉菜单的位置

Question

我正在尝试修改带有下拉菜单的 CSS 选项卡以添加另一级菜单(不要问为什么)。我让它工作了，但我想要第二个下拉菜单(屏幕截图中带有“子项”的菜单)更靠右。我认为它应该始终出现在任何元素的末尾。

我无法弄清楚顶部的所有空间是从哪里来的。我尝试将边距设置为 0 并设置 left:0 。这是我得到的:

编辑:这是一个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;左:20px；顶部:0px； }

您可以更改值以将其移动到您希望的任何位置。顶部 0 使其位于父列表项的正下方。

这jsfiddle将它显示在父列表项的正下方，而不是更靠右的位置，因为我也不知道如何去掉多余的空格。

编辑:实际上，尝试将子项列表中的位置更改为绝对位置，如下所示:

.nav ul ul ul {
position: absolute;

然后你可以把上面左边的值改成你想去的地方。 fiddle