Dropdown Menu wont appear

Question

I am working on my portfolio and I have stumbled upon a problem while working on my navigation bar. I am trying to hide the drop-down and make it appear on hover, but it is not showing up. I am also trying to center the dropdown menu to its parent which is Portfolio, but I could not figure out how to do so, so I just used padding which is a very poor method.

Here is the part of the code I think I am doing something wrong in, and a fiddle.

nav ul li:hover ul {
    height: auto;
    overflow: auto;
}

JSFiddle

Answer 1

In your HTML, the nested <ul> needs to be inside the closing </li>

<li>
    <a href="">Portfolio</a>
    <ul>
        <li><a href="">Experimental</a></li>
        <li><a href="">Motion Graphics</a></li>
        <li><a href="">Graphic Design</a></li>
        <li><a href="">Web Design</a></li>
    </ul>
</li>

You can position your submenu relative to it's parent by setting your parent menu item to position: relative; which you already have, and adding these styles to your submenu, changing the top and left values to your requirements:

position: absolute;
top: 0;
left: 0;

I have updated your fiddle here