CSS菜单出现问题

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; } 

 <div> <ul class="menu"> <li class="top"><a href="http://boltbait.com" target="_self" class="top_link"><span>Home</span></a> </li> <li class="top"><a href="/dominoes" target="_self" class="top_link"><span>Dominoes</span></a> <ul class="sub"> <li><a href="/dominoes" target="_self">Double-Six Dominoes</a> </li> <li><a href="/dominoes/DoubleSix20.exe" target="_self">Download Now</a> </li> <li><a href="/dominoes/rules" target="_self">Domino Rules</a> </li> <li><a href="/dominoes/help" target="_self">Help</a> </li> </ul> </li> <li class="top"><a href="/pdn" target="_self" class="top_link"><span>Paint.NET</span></a> <ul class="sub"> <li><a href="/pdn" target="_self">Free Paint.NET Plugins</a> </li> <li><a href="/pdn/CodeLab" target="_self">CodeLab</a> </li> <li><a href="/pdn/CodeLab/help" target="_self">CodeLab Help File</a> </li> <li><a href="/pdn/InstallingEffects.asp" target="_self">How to Install Paint.NET Plugins</a> </li> </ul> </li> <li class="top"><a href="/htmleditor" target="_self" class="top_link"><span>HTML Editor</span></a> <ul class="sub"> <li><a href="/htmleditor" target="_self">Free HTML Editor</a> </li> <li><a href="/htmleditor/HTMLEditor.hta" target="_self">Download Now</a> </li> <li><a href="/htmleditor/Help.asp" target="_self">Help</a> </li> <li><a href="http://www.w3.org/MarkUp/Guide/" target="_blank">HTML Basics</a> </li> <li><a href="http://htmlhelp.com/reference/html40/alist.html" target="_blank">HTML Reference</a> </li> </ul> </li> <li class="top"><a href="/free/games" target="_self" class="top_link"><span>Free Games</span></a> </li> <li class="top"><a href="http://boltbait.com/donate" target="_self" class="top_link"><span>Donate</span></a> </li> </ul> </div> 

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!

Answer 1

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

You have:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

Answer 2

Why do you need such generators for menu? Simply you can use this:

 .menu > li {display: inline-block; position: relative;} .menu > li .sub {display: none; position: absolute; left: 0;} .menu > li:hover .sub {display: block; margin: 0; padding: 0; list-style: none;} 

 <div> <ul class="menu"> <li class="top"><a href="http://boltbait.com" target="_self" class="top_link"><span>Home</span></a> </li> <li class="top"><a href="/dominoes" target="_self" class="top_link"><span>Dominoes</span></a> <ul class="sub"> <li><a href="/dominoes" target="_self">Double-Six Dominoes</a> </li> <li><a href="/dominoes/DoubleSix20.exe" target="_self">Download Now</a> </li> <li><a href="/dominoes/rules" target="_self">Domino Rules</a> </li> <li><a href="/dominoes/help" target="_self">Help</a> </li> </ul> </li> <li class="top"><a href="/pdn" target="_self" class="top_link"><span>Paint.NET</span></a> <ul class="sub"> <li><a href="/pdn" target="_self">Free Paint.NET Plugins</a> </li> <li><a href="/pdn/CodeLab" target="_self">CodeLab</a> </li> <li><a href="/pdn/CodeLab/help" target="_self">CodeLab Help File</a> </li> <li><a href="/pdn/InstallingEffects.asp" target="_self">How to Install Paint.NET Plugins</a> </li> </ul> </li> <li class="top"><a href="/htmleditor" target="_self" class="top_link"><span>HTML Editor</span></a> <ul class="sub"> <li><a href="/htmleditor" target="_self">Free HTML Editor</a> </li> <li><a href="/htmleditor/HTMLEditor.hta" target="_self">Download Now</a> </li> <li><a href="/htmleditor/Help.asp" target="_self">Help</a> </li> <li><a href="http://www.w3.org/MarkUp/Guide/" target="_blank">HTML Basics</a> </li> <li><a href="http://htmlhelp.com/reference/html40/alist.html" target="_blank">HTML Reference</a> </li> </ul> </li> <li class="top"><a href="/free/games" target="_self" class="top_link"><span>Free Games</span></a> </li> <li class="top"><a href="http://boltbait.com/donate" target="_self" class="top_link"><span>Donate</span></a> </li> </ul> </div>