Z-index issues, z-index isn't working as it should

Question

My issue is when ever the links are hover, the hidden sub menu pushes the below div with it. I've tried playing around z-index but still no luck. Can someone please help me with this. 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

As said z-index is not the issue here. Add this line to your css

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

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

Answer 2

Here is one solution

.leaderbord-ad
{
    padding-top: 20px;
    position: absolute;

}

Answer 3

Adam's answer definitely works, however, when you add additoional elements, they will be out of place relative to the image. In this specific case, I suggest the solution of changing

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

to

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

Then, you can change

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

to

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

I find it more logical to manipulate the position of the element that is causing the problem. This allows you to separate the navbar positioning from the positioning of rest of your page elements so anything added will fall inline under your image.