Question

我正在尝试修改CSS Tab w /下拉菜单以添加另一级菜单（不要问为什么）。我得到了它的工作，但我想要第二个下拉菜单（屏幕截图中带有“子项目”的菜单）更多。我认为它应该总是出现在项目的最后。

我无法弄清楚顶部所有空间的来源。我尝试将边距设置为0并设置左：0。这就是我得到的：

编辑：这是jsfiddle。谢谢！

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在父列表项下面显示，而不是在右边更多，因为我无法弄清楚如何摆脱额外的空格。

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

.nav ul ul ul {
position: absolute;

然后，您可以将上面的左侧值更改为您想要的位置。 fiddle

调整CSS下拉菜单的位置

1 个答案: