I recently created a navigation bar using some online tutorials, and everything seems to be working fine except for the drop-down menu. I've been struggling with it for hours and can't seem to find a solution. Any help would be greatly appreciated! I feel like I'm so close to getting it right but just can't figure it out. Thank you in advance for your assistance.
<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"><a href="#">Home</a></li>
<li role="menuitem" aria-haspopup=true tabindex="0"><a href="#">Tutorials</a></li>
<ul class="submenu" role="menu" aria-hidden=true>
<li role="menuitem" tabindex="-1"><a href="pre-pro.html">Pre-Production</a></li>
<li role="menuitem" tabindex="-1"><a href="production.html">Production</a></li>
<li role="menuitem" tabindex="-1"><a href="post.html">Post</a></li>
</ul>
<li role="menuitem" tabindex="0"><a href="#">Films</a></li>
</ul>
</nav>
</header>