Demo Fiddle

Question

我尝试创建一个下拉菜单，但出于某种原因，但子菜单项不会直接显示在父级下方。

这是我的小提琴：http://jsfiddle.net/oampz/Lf3u3/2/

如果您悬停超过一年，您可以看到电影类型显示在左侧。

HTML：

<nav class="site-nav">
    <ul class="menu-nav wrap menu menu--hor">
        <ul id="main-nav">
            <li class="menu-nav--home main-link">
                <a href="index.html" title="home"></a>    
            </li>
            <li class="menu-border drop-down nav-dropdown"><a>2014</a>
                <ul class="visuallyhidden">
                    <li><a href="#" title="title">Action</a>
                    </li>
                    <li><a href="#" title="title">Horror</a>
                    </li>
                    <li><a href="#" title="title">Sci-fi</a>
                    </li>
                </ul>
            </li>
            <li class="menu-border drop-down nav-dropdown"><a>2013</a>

                <ul class="visuallyhidden">
                    <li><a href="#" title="title">Action</a>
                    </li>
                    <li><a href="#" title="title">Horror</a>
                    </li>
                    <li><a href="#" title="title">Sci-fi</a>
                    </li>
                </ul>
            </li>
        </ul>
    </ul>
</nav>

关于我如何总是让子菜单显示在其父母下方的任何建议都将不胜感激。

由于

Answer 1

为什么不为此寻求纯粹的CSS解决方案？

作为一个起点：

Demo Fiddle

HTML

<ul>
    <li>2013</li>
    <li>2014
        <ul>
            <li>Action</li>
            <li>Horror</li>
            <li>Sci Fi</li>
        </ul>
    </li>
</ul>

CSS

 html {
     background: white;
     font-size: 100%;
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     min-height: 100%;
 }
 html {
     font-family: sans-serif;
 }
 body {
     margin: 0;
     padding: 0;
     background: transparent;
     font-size: 1rem;
     line-height: 1.5;
     color: #595959;
     min-width: 1080px;
 }
 ul {
     list-style:none;
     background:green;
     background: #0c5cac;
     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0d66bf), color-stop(100%, #094786));
     background-image: -webkit-linear-gradient(#0d66bf, #094786);
     background-image: -moz-linear-gradient(#0d66bf, #094786);
     background-image: -o-linear-gradient(#0d66bf, #094786);
     background-image: linear-gradient(#0d66bf, #094786);
     border-width: 1px 0 1px 0;
     border-style: solid;
     border-color: #09427c;
     font-size: 14px;
     font-size: 0.875rem;
     line-height: 1.71429;
     color:white;
 }
 ul li {
     position:relative;
 }
 ul, li {
     margin:0;
     padding:0;
 }
 li {
     display:inline-block;
     padding:10px 10px;
 }
 ul li ul {
     display:none;
     position:absolute;
     top:45px;
     left:0;
 }
 ul li ul li {
     display:block;
 }
 ul li:hover {
     background-color: #2d8ff0;
     color: white;
     text-shadow: none;
 }
 ul li:hover ul {
     display:block;
 }

Answer 2

将relative position提供给具有班级名称下拉列表的列表项

.drop-down{
    position:relative;
}

Answer 3

bootstrap.min.css （行号-1982）

.dropdown-menu {
    position: absolute;
    /*top: 100%;*/  //hide this part
}

下拉菜单不会显示在父级下方

3 个答案:

Demo Fiddle