javascript - Z-index 问题，z-index 没有正常工作

Question

我的问题是，当链接悬停时，隐藏的子菜单会插入下面的 div。我试过玩 z-index 但仍然没有运气。有人可以帮我解决这个问题吗？ my jsfiddle

HTML:

<div class="row" id="top-eybrow">
        <div class="eyebrow-section right text-left">
            <ul>
                <li>
                    <a href="#">Sign in</a>
                </li>
                <li>
                    <a href="#">Register</a>
                </li>
                <li>
                    <a href="#">My acount &nbsp;<i class="fa fa-sort-desc dropdown-i fa-fw"></i></a>
                    <ul>
                        <li>
                            <a href="#">Add listtings</a>
                        </li>
                        <li>
                            <a href="#">Update my profile</a>
                        </li>
                        <li>
                            <a href="#">View all listings</a>
                        </li>
                        <li>
                            <a href="#">My sales</a>
                        </li>
                        <li>
                            <a href="#">Messages</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Help</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="clearfix clear-columns"></div>
    <div class="row  clearfix leaderbord-ad">
        <img src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/Screen_Shot_2015-06-01_at_4.42.14_AM.png">
    </div>

CSS:

.eyebrow-section
{
    margin-right: -45px;
    position: relative;
    z-index: 100 !important;
}

.leaderbord-ad
{
    padding-top: 10px;
    position: relative;
    z-index: -100 !important;
}

Answer 1

如前所述，z-index 不是这里的问题。将此行添加到您的 css

.eyebrow-section ul ul {
    position: absolute;
}

https://jsfiddle.net/8L8rpscd/5/