title: Having trouble with a CSS menu
body: <p>I need a CSS expert to review the CSS and HTML for my site menu.  You can see it in action at <a href="http://www.BoltBait.com" rel="nofollow">http://www.BoltBait.com</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.menu {
    padding: 0 0 0 32px;
    margin: 0;
    list-style: none;
    height: 35px;
    background: #fff url(http://boltbait.com/images/MenuBack.png) repeat-x;
    position: relative;
    font-family: verdana, arial, helvetica, tahoma, sans-serif;
  }
  .menu li.top {
    display: block;
    float: left;
    position: relative;
  }
  .menu li a.top_link {
    display: block;
    float: left;
    height: 35px;
    line-height: 33px;
    color: white;
    text-decoration: none;
    font-size: 12pt;
    font-weight: normal;
    padding: 0 0 0 12px;
    cursor: pointer;
  }
  .menu li a.top_link span {
    float: left;
    font-weight: normal;
    display: block;
    padding: 0 23px 0 12px;
    height: 35px;
  }
  .menu li a.top_link span.down {
    float: left; display:block; padding:0 24px 0 12px; height:35px; background:url(http://boltbait.com/images/down.gif) no-repeat right top;
  }
  .menu li a.top_link:hover {
    color: #000; background: url(http://boltbait.com/images/button4.gif) no-repeat;
  }
  .menu li a.top_link:hover span {
    background: url(http://boltbait.com/images/button4.gif) no-repeat right top;
  }
  .menu li a.top_link:hover span.down {
    background: url(http://boltbait.com/images/button4a.gif) no-repeat right top;
  }
  .menu li:hover &gt; a.top_link {
    color: #000; background: url(http://boltbait.com/images/button4.gif) no-repeat;
  }
  .menu li:hover &gt; a.top_link span {
    background: url(http://boltbait.com/images/button4.gif) no-repeat right top;
  }
  .menu li:hover &gt; a.top_link span.down {
    background: url(http://boltbait.com/images/button4a.gif) no-repeat right top;
  }
  .menu table {
    border-collapse: collapse;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .menu a:hover {
    visibility: visible;
  }
  .menu li:hover {
    position: relative;
    z-index: 200;
  }
  .menu ul,
  .menu:hover ul ul,
  .menu:hover ul:hover ul ul,
  .menu:hover ul:hover ul:hover ul ul,
  .menu:hover ul:hover ul:hover ul:hover ul ul {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .menu:hover ul.sub {
    left: 2px;
    top: 35px;
    right: 2px;
    background: #fff;
    padding: 3px 0;
    border: 1px solid #999999;
    white-space: nowrap;
    width: 200px;
    height: auto;
  }
  .menu:hover ul.sub li {
    display: block;
    height: 20px;
    position: relative;
    float: left;
    width: 250px;
  }
  .menu:hover ul.sub li a {
    font-weight: normal;
    display: block;
    font-size: 11px;
    height: 20px;
    width: 192px;
    line-height: 20px;
    text-indent: 5px;
    color: #000;
    text-decoration: none;
    border: 3px solid #fff;
    border-width: 0 0 0 3px;
  }
  .menu:hover ul.sub li a.fly {
    background: #fff url(http://boltbait.com/images/arrow.gif) 80px 7px no-repeat;
  }
  .menu:hover ul.sub li a:hover {
    background: #999999;
    color: #fff;
  }
  .menu:hover ul.sub li a.fly:hover {
    background: #999999 url(http://boltbait.com/images/arrow_over.gif) 80px 7px no-repeat;
    color: #fff;
  }
  .menu:hover ul li:hover &gt; a.fly {
    background: #999999 url(http://boltbait.com/images/arrow_over.gif) 80px 7px no-repeat;
    color: #fff;
  }
  .menu:hover ul:hover ul,
  .menu:hover ul:hover ul:hover ul,
  .menu:hover ul:hover ul:hover ul:hover ul,
  .menu:hover ul:hover ul:hover ul:hover ul:hover ul {
    left: 90px;
    top: -4px;
    background: #fff;
    padding: 3px 0;
    border: 1px solid 999999;
    white-space: nowrap;
    width: 93px;
    z-index: 200;
    height: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;ul class="menu"&gt;
      &lt;li class="top"&gt;&lt;a href="http://boltbait.com" target="_self" class="top_link"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="top"&gt;&lt;a href="/dominoes" target="_self" class="top_link"&gt;&lt;span&gt;Dominoes&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="sub"&gt;
          &lt;li&gt;&lt;a href="/dominoes" target="_self"&gt;Double-Six Dominoes&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="/dominoes/DoubleSix20.exe" target="_self"&gt;Download Now&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="/dominoes/rules" target="_self"&gt;Domino Rules&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="/dominoes/help" target="_self"&gt;Help&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="top"&gt;&lt;a href="/pdn" target="_self" class="top_link"&gt;&lt;span&gt;Paint.NET&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="sub"&gt;
          &lt;li&gt;&lt;a href="/pdn" target="_self"&gt;Free Paint.NET Plugins&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="/pdn/CodeLab" target="_self"&gt;CodeLab&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="/pdn/CodeLab/help" target="_self"&gt;CodeLab Help File&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="/pdn/InstallingEffects.asp" target="_self"&gt;How to Install Paint.NET Plugins&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="top"&gt;&lt;a href="/htmleditor" target="_self" class="top_link"&gt;&lt;span&gt;HTML Editor&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="sub"&gt;
          &lt;li&gt;&lt;a href="/htmleditor" target="_self"&gt;Free HTML Editor&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="/htmleditor/HTMLEditor.hta" target="_self"&gt;Download Now&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="/htmleditor/Help.asp" target="_self"&gt;Help&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.w3.org/MarkUp/Guide/" target="_blank"&gt;HTML Basics&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="http://htmlhelp.com/reference/html40/alist.html" target="_blank"&gt;HTML Reference&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="top"&gt;&lt;a href="/free/games" target="_self" class="top_link"&gt;&lt;span&gt;Free Games&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="top"&gt;&lt;a href="http://boltbait.com/donate" target="_self" class="top_link"&gt;&lt;span&gt;Donate&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that on the top level page, the sub menus don't show.  But, if you navigate to any of the pages, such as <a href="http://www.BoltBait.com/pdn" rel="nofollow">http://www.BoltBait.com/pdn</a> the sub menus show on hover as they are supposed to.</p>
  
  <p>This code was written by one of those free online menu builders that I can't remember.  So, I'm at a loss as to what is wrong with the code.</p>
  
  <p>Any help would be most welcome.  Thanks!</p>