下拉菜单不出现在父级下方

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
}