CSS菜單出現問題

Question

我需要CSS專家來查看網站菜單的CSS和HTML。 您可以在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> 

問題是在頂層頁面上沒有顯示子菜單。 但是，如果您導航到任何頁面，例如http://www.BoltBait.com/pdn，則子菜單將按預期顯示在懸停上。

這段代碼是由我不記得的那些免費在線菜單構建器之一編寫的。 因此，我對代碼的問題不知所措。

任何幫助將是最歡迎的。 謝謝！

Answer 1

您在主頁上缺少doctype聲明。

你有：

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

在其他頁面上。 將其添加到主頁應該可以解決問題。

Answer 2

為什么您需要菜單生成器？ 只需使用以下即可：

 .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>