gpt4 book ai didi

html - CSS 菜单有问题

转载 作者:太空宇宙 更新时间:2023-11-04 03:01:32 24 4
gpt4 key购买 nike

我需要 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子菜单按预期显示在悬停时。

此代码是由我不记得的那些免费在线菜单生成器之一编写的。所以,我不知道代码有什么问题。

我们非常欢迎任何帮助。谢谢!

最佳答案

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

你有:

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

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

关于html - CSS 菜单有问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31234699/

24 4 0