Dropdown menu appearing not below parent

Question

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

Here is my fiddle: 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.

Thanks

Solution 1

Give relative position to the list items with class name dropdown

.drop-down{
    position:relative;
}

Solution 2

Why not pursue a purely CSS solution for this?

As a starting point:

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;
 }

Comments

[Oam Psy]

@SW4 - Thanks for the solution, is this cross-browser compatitble?

[SW4]

@OamPsy - it is indeed. You'll want to edit for your own purposes (e.g. add in some a tags, more styling etc if needed) but it will work cross-browser.