CSS Drop Down Broken - css

Question

Okay so here's the deal I made this navigation bar, thanks to a tutorial online, with the code below, everything works BUT the drop down menu, I hover over and nothing happens I've been slaving over this for hours! Thank you very much in advance for anyone's help! I know I'm close to getting it right but I just can't figure it out! Again thank you in advance for your help.
<style>
header { font-family: 'blades_gf_freeregular', Futura, Arial, sans-serif; }
nav { height: 41px; background: linear-gradient( #1e7995, #1c2c3f); }
nav ul { margin: 0; }
nav, ul.submenu { background: linear-gradient( #1e7995, #1c2c3f); border-radius: 5px; padding: 0; }
nav ul li { display: block; width: 150px; text-align: center; float: left; margin: 0; padding: 0; }
nav li:hover { background: rgba(0,0,0,0.4); }
nav a { color:#fff; text-decoration: none; display: block; padding: 10px; }
nav ul.submenu { background: rgba(0,0,0,0.8); position: relative; boredr-radius: 0 0 5px 5px; height: 0px; overflow: hidden; }
nav ul.submenu li { float: none; text-align: left; border-bottom: 1px solid rbga(0,0,0,0.3); }
nav ul li { transition: .3s all linear; }
nav ul li:hover ul.submenu { height: 126px; }
</style>
<header>
<p><img src="assets/images/header32.png" alt="before and after effects title image"/></p>
<nav role="navigation" aria-label="Main menu">
<ul role="menubar">
<li role="menuitem" tabindex="0">Home</li>
<li role="menuitem" aria-haspopup=true tabindex="0">Tutorials</li>
<ul class="submenu" role="menu" aria-hidden=true>
<li role="menuitem" tabindex="-1">Pre-Production</li>
<li role="menuitem" tabindex="-1">Production</li>
<li role="menuitem" tabindex="-1">Post</li>
</ul>
<li role="menuitem" tabindex="0">Films</li>
</ul>
</nav>
</header>

Answer 1

You need to move sub menu ul inside the menu li
<header>
<p><img src="assets/images/header32.png" alt="before and after effects title image"/></p>
<nav role="navigation" aria-label="Main menu">
<ul role="menubar">
<li role="menuitem" tabindex="0">Home</li>
<li role="menuitem" aria-haspopup=true tabindex="0">Tutorials
<ul class="submenu" role="menu" aria-hidden=true>
<li role="menuitem" tabindex="-1">Pre-Production</li>
<li role="menuitem" tabindex="-1">Production</li>
<li role="menuitem" tabindex="-1">Post</li>
</ul>
</li>
<li role="menuitem" tabindex="0">Films</li>
</ul>
</nav>
</header>
DEMO

Answer 2

You have prematurely closed the parent <li> element that the submenu should belong to.
http://jsfiddle.net/GL87s/
<header>
<p><img src="assets/images/header32.png" alt="before and after effects title image"/></p>
<nav role="navigation" aria-label="Main menu">
<ul role="menubar">
<li role="menuitem" tabindex="0">Home</li>
<li role="menuitem" aria-haspopup=true tabindex="0">Tutorials
<ul class="submenu" role="menu" aria-hidden=true>
<li role="menuitem" tabindex="-1">Pre-Production</li>
<li role="menuitem" tabindex="-1">Production</li>
<li role="menuitem" tabindex="-1">Post</li>
</ul></li>
<li role="menuitem" tabindex="0">Films</li>
</ul>
</nav>
</header>
Fixes it.
The only children a <ul> should have is <li>s. Not another <ul>.

Answer 3

You're really close. Judging by your CSS, the ul.submenu should be inside the <li> it belongs to. Just move it inside the <li>. Here's a jsfiddle with the change:
http://jsfiddle.net/8WGKU/

Answer 4

Keep submenu inside <li>
<li role="menuitem" aria-haspopup=true tabindex="0">Tutorials
<ul class="submenu" role="menu" aria-hidden=true>
<li role="menuitem" tabindex="-1">Pre-Production</li>
<li role="menuitem" tabindex="-1">Production</li>
<li role="menuitem" tabindex="-1">Post</li>
</ul>
</li>
Fiddle here.