【发布时间】：2015-07-05 20:29:08
【问题描述】：
我需要一位 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，子菜单会按预期显示在悬停时。
这段代码是由我不记得的那些免费在线菜单生成器之一编写的。所以，我不知道代码有什么问题。
非常欢迎任何帮助。谢谢！
【问题讨论】：
-
你有大约 8k Rep，但你不知道如何缩进代码！太可惜了？我们将如何阅读代码？
-
抱歉，正如所解释的，代码是由那些免费的在线 css 菜单构建器程序之一编写的。
-
不过，你可以像我一样做。为你写一个答案。哥们别担心！