During hover on parent element, show child (dropdown nav)

[Stille]

I'm trying to make a stupid horizontal nav bar with a drop-down on some of the items. The way I decided to do it is just by putting the drop-down in a div tag. This is easily changeable, i just don't like to go heavy on the html side.Basically I just want my drop down to work when you hover over the parent element. Additional css is going to be used to make it pretty and positioned better.Here's my js:\[code\]var dropdown = $('.dropdown');var parent = dropdown.parent();$(parent).hover( function () { dropdown.css('display', 'block'); });\[/code\]Here's my css:\[code\]div.nav { text-align: center;}div.nav > ul > li { margin-top: 15px; text-align: center; font-size: 1.25em;}div.nav > ul > li { display: inline-block; list-style-type: none;}div.nav a { padding: 1em;}div.dropdown { display: none; background-color: black; position: absolute;}\[/code\]Here's my html:\[code\]<div class="nav"> <ul> <li><a href="http://stackoverflow.com/questions/14422199/index.html">Home</a></li> <li> <a href="http://stackoverflow.com/questions/14422199/game.html">Sample Game</a> <div class="dropdown"> <a href="http://stackoverflow.com/questions/14422199/index.html">About it</a> <br> <a href="http://stackoverflow.com/questions/14422199/index.html">Game</a> </div> </li> <li><a href="http://stackoverflow.com/questions/14422199/solutions.html">TP Solutions</a></li> <li><a href="http://stackoverflow.com/questions/14422199/projects.html">Projects</a></li> <li><a href="http://stackoverflow.com/questions/14422199/contact.html">Contact Me</a></li> </ul><div class="clear"></div>\[/code\]