html - 下拉菜单不在父级下方

Question

我曾尝试创建一个下拉菜单，但由于某种原因，子菜单项并没有直接出现在父菜单的下方。

这是我的 fiddle :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;
 }