下拉菜单不会显示在父级下方 [英] Dropdown menu appearing not below parent

问题描述

我试图创建一个下拉菜单，但出于某种原因，但子菜单项不会直接出现在父项下面。

I have tried to create a dropdown menu, but for some reason, but sub menu items do not appear directly below the parent.

这是我的小提琴：< a href =http://jsfiddle.net/oampz/Lf3u3/2/ =nofollow> http://jsfiddle.net/oampz/Lf3u3/2/

如果你悬停超过一年，你可以看到电影类型出现在左边。

If you hover over a year, you can see the movie genres appear to the left.

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>

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

Any advice on how i can always make the sub menu appear below its parent would be appreciated.

谢谢

推荐答案

提供相对位置到具有班级名称下拉列表的列表项目

Give relative position to the list items with class name dropdown

.drop-down{
    position:relative;
}

这篇关于下拉菜单不会显示在父级下方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！