title: My css dropdown menu's won't show the sub menu
body: <p>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.</p>
  
  <pre><code>&lt;header id="header" class="HeaderStyle" style="padding-bottom: 0px; padding-top: 0px;"&gt;
  &lt;p style="font-size: xx-large; width: 400px;margin-top: 0px;margin-bottom: 0px;margin-right: 0%;"&gt; Sherwood Lego League&lt;/p&gt;
  &lt;form method="get" action="http://www.google.com/search" style="text-align:right; width: 99%;"&gt;
      &lt;input type="text" name="q" size="25" maxlength="255" value="" placeholder="Search"&gt;
      &lt;input type="submit" value="Search"&gt;
      &lt;input type="hidden" name="sitesearch" value="www.SherwoodLegoLeague.com"&gt;
  &lt;/form&gt;
  &lt;navigation id="NavigationLink" class="navigationStyle"&gt;
      &lt;section class="menu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a class="left_nosub" href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="center_hassub" href="teams/teams.html"&gt;Teams&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="teams/team1.html"&gt;Team 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="teams/team2.html"&gt;Team 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="teams/team3.html"&gt;Team 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="teams/team4.html"&gt;Team 4&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="teams/team5.html"&gt;Team 5&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a class="center_hassub" href="news/news.html"&gt;News&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="news/article.html"&gt;Articles&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="news/timeline.html"&gt;Timeline&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a class="right_nosub" href="contactUs.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/section&gt;
  &lt;/navigation&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS section</p>
  
  <pre><code>.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;
  }
  </code></pre>