Having trouble with a CSS menu

Question

I need a CSS expert to review the CSS and HTML for my site menu. You can see it in action at http://www.BoltBait.com

.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 > a.top_link {
  color: #000; background: url(http://boltbait.com/images/button4.gif) no-repeat;
}
.menu li:hover > a.top_link span {
  background: url(http://boltbait.com/images/button4.gif) no-repeat right top;
}
.menu li:hover > 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 > 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;
}


  
    Home
    
    Dominoes
      
        Double-Six Dominoes
        
        Download Now
        
        Domino Rules
        
        Help
        
      
    
    Paint.NET
      
        Free Paint.NET Plugins
        
        CodeLab
        
        CodeLab Help File
        
        How to Install Paint.NET Plugins
        
      
    
    HTML Editor
      
        Free HTML Editor
        
        Download Now
        
        Help
        
        HTML Basics
        
        HTML Reference
        
      
    
    Free Games
    
    Donate

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 http://www.BoltBait.com/pdn the sub menus show on hover as they are supposed to.

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.

Any help would be most welcome. Thanks!

harris · Accepted Answer

You're missing the doctype declaration on the main page.

You have:

On the other pages. Adding that to the main page should do the trick.

Having trouble with a CSS menu

Answers (2)

Related Questions