My css dropdown menu's won't show the sub menu - html

Question

The sub menu doesn't show up when i hover over the tabs and I have been trying to find a fix for a few days. I have been going over the syntax for a while and I feel like I need a new pair of eyes. Please help as soon as possible.
<header id="header" class="HeaderStyle" style="padding-bottom: 0px; padding-top: 0px;">
<p style="font-size: xx-large; width: 400px;margin-top: 0px;margin-bottom: 0px;margin-right: 0%;"> Sherwood Lego League</p>
<form method="get" action="http://www.google.com/search" style="text-align:right; width: 99%;">
<input type="text" name="q" size="25" maxlength="255" value="" placeholder="Search">
<input type="submit" value="Search">
<input type="hidden" name="sitesearch" value="www.SherwoodLegoLeague.com">
</form>
<navigation id="NavigationLink" class="navigationStyle">
<section class="menu">
<ul>
<li><a class="left_nosub" href="home.html">Home</a></li>
<li><a class="center_hassub" href="teams/teams.html">Teams</a>
<ul>
<li>Team 1</li>
<li>Team 2</li>
<li>Team 3</li>
<li>Team 4</li>
<li>Team 5</li>
</ul>
</li>
<li><a class="center_hassub" href="news/news.html">News</a>
<ul>
<li>Articles</li>
<li>Timeline</li>
</ul>
</li>
<li><a class="right_nosub" href="contactUs.html">Contact Us</a></li>
</ul>
</section>
</navigation>
</header>
CSS section
.menu {
font-family: "TimesNewRoman", Times, serif;
position: relative;
font-size: 11px;
margin: 0;
z-index: 1000;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #f0f0f0;
font-weight: bold;
width: 81px;
height: 42px;
text-align: center;
border-bottom: 0;
background-image: url('../images/MenuPieces/center.png');
line-height: 48px;
font-size: 11px;
overflow: hidden;
padding-left: 1px;
}
.menu .left_nosub {
background-image: url('../images/MenuPieces/left.png');
padding-left: 1px;
margin-right: -1px;
}
.menu .right_nosub {
background-image: url('../images/MenuPieces/right.png');
}
.menu ul {
padding: 0;
margin: 0;
list-style: none;
}
.menu ul li {
float: left;
position: relative;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color: #000;
background: url('../images/MenuPieces/center_hassub.png');
}
.menu ul li:hover ul li a.center_hassub {
background: #6a3;
color: #000;
}
.menu ul li:hover ul li:hover a.center_hassub {
background: #6fc;
color: #000;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover .left_nosub {
color: #000;
background: url('../images/MenuPieces/left_nosub.png');
}
.menu ul li:hover .right_hassub {
color: #000;
background: url('../images/MenuPieces/right_hassub.png');
}
.menu ul li:hover .right_nosub {
color: #000;
background: url('../images/MenuPieces/right_nosub.png');
}
.menu ul li:hover ul li a {
background-image: none;
display: block;
height: 28px;
line-height: 26px;
color: #000;
width: 142px;
text-align: left;
margin: 0;
padding: 0 0 0 11px;
font-weight: normal;
}
.menu ul li:hover ul {
margin: 0 0 0 3px;
padding: 0;
background-image: url('../images/MenuPieces/dropdown.png');
background-repeat: no-repeat;
background-position: bottom left;
}
.menu ul li:hover ul li a:hover {
color: #000 !important;
background-image: url('../images/MenuPieces/sub_hover.png');
}
.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 105px;
top: 0;
}
.menu ul li:hover ul li:hover ul.left {
left: -105px;
}
.menu ul li:hover ul .sub_active {
background-image: url('../images/MenuPieces/sub_active.png');
margin-right: 1px;
}

Answer 1

You hid them by default but you forgot to add a display property to them upon hover. You need to add something like display: block; or display: inline-block; or similar property to the .menu ul li:hover ul li a:hover and .menu ul li:hover ul selectors.
JSFiddle

Answer 2

ul li:hover ul {
display:block;
}
Have something like this, so that when you hover over ul li, you display ul.