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

为什么需要这样的菜单生成器？你可以简单地使用这个：

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

Answer 2

您缺少主页上的文档类型声明。

你有：

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

在其他页面上。将其添加到主页应该可以解决问题。

CSS 菜单有问题

Having trouble with a CSS menu

html

css

menu