html / css dropdown menu not dropping

Question

edit JSfiddle

---

Simple question, i've got the following code but i dont know what to add to my css to lift the display:none; If you need further explaining feel free to ask in the comments.

<nav>
        <ul>
            <li>
               <a href="[[~[[+id]]]]" title="[[+pagetitle]]">
                 [[+longtitle:default=`[[+pagetitle]]`]] 
               </a>
               <ul>
                  <li>
                     <a href="#" title=lorem>
                        [[Wayfinder? &startId=`[[+id]]` &level=`2` ]]
                     </a>
                  </li>
               </ul>
            </li>
        </ul>
    </nav>

---

/** Navigation **/

#nav ul{list-style: none; padding: 0; display: block;}
#nav ul li{display: inline-block; position: relative;}
#nav ul li a{ display: block; padding: 5px 8px; text-decoration: none; font-size: 16px; }

#nav ul li ul{
    position: absolute;
    left: 0px;
    background: rgba(0,0,0,0.8);
    border-radius: 0 0 5px 5px;
    display: none;
    z-index: 9000;
    display:none;
}
.ie7 #nav ul li ul,
.ie8 #nav ul li ul{
    background: url('../../assets/img/transparent-black.png') repeat;
}
#nav ul li.last ul{ right: 0px; left: auto; }
#nav ul li.last ul li a{ text-align: right; }
#nav ul li:hover ul,
#nav ul li ul:hover{ display: block; }
#nav ul li ul li{
    display: block;
    padding: 0;
    overflow: hidden;       
}
#nav ul li ul li a{
    min-width: 100px;
    margin: 0;
    padding: 7px 14px;
    color: #ffffff;
}
#nav ul li ul li:hover{ background: #f1f1f1; }
#nav ul li ul li a:hover{ color: rgba(253,183,46,1); }


nav li:hover > nav li ul li{
    background-color:red;
    overflow:visible;
}
nav li ul li{
    display:none;
}

Answer 1

try this:

    nav ul li ul li{
    display:none;
}

    nav ul li:hover > ul li{
        display:block;
    }

http://jsfiddle.net/vpZ5J/4/

Answer 2

You were trying to hide the li items in the sub-menu. Instead hide the submenu ul and then display it on hover. For that change this

nav li ul li{
    display:none;
}

to

nav li ul{
    display:none;
}

and add this

nav li:hover > ul{
    display:block;
}

DEMO

Answer 3

Try adding this:

nav ul li:hover li,
nav ul li:hover ul{
    display:block;
}

jsfiddle

Answer 4

Add the following rule:

nav li:hover, nav li:hover ul li{
    display:block;
}

http://jsfiddle.net/vpZ5J/

Answer 5

I think what you are looking for is:

nav ul li:hover > ul {
   display: block;
}

Also, you don't have div with id #nav, so all your styling is incorect, you should be using just nav