CSS DropDown菜单项重叠海誓山盟
问题描述:
我正在创建一个基于suckerfish的下拉菜单。顶层显示正确,但是第一个子菜单层将所有菜单项叠加在顶层上方。除了项目重叠之外,一切都是正确的。下面是我的html和css。CSS DropDown菜单项重叠海誓山盟
<ul id="nav">
<li style="border-left: none;">
<link here>
<ul>
<li>
<link here>
<ul>
<li>
<link here>
</li>
</ul>
<ul>
<li>
<link here>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<link here>
<ul>
<li>
<link here>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<link here>
</li>
</ul>
</li>
<li>
<link here>
<ul>
<li>
<link here>
</li>
</ul>
<ul>
<li>
<link here>
</li>
</ul>
</li>
<li>
<link here>
</li>
<li>
<link here>
</li>
<li>
<link here>
</li>
<li>
<link here>
</li>
</ul>
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
}
#nav li {
float: left;
padding: 0px 10px 0px 10px;
}
#nav li ul {
position: absolute;
width: 200px;
color: #FFF;
background-color: #000;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#nav li ul ul {
margin: -1em 0 0 10em;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
left: auto;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {
left: auto;
}
我的CSS从suckerfish拉得很直。像宽度和背景颜色有一些小的变化,但即使是直接复制,问题仍然存在。目前我只是试图让这个在Firefox中,因为我在我尝试的每个浏览器中都遇到同样的问题。
只是一个fyi,我使用umbraco作为此网站的CMS,并且它正在生成菜单的html。有实际的链接,我只是不能发布他们,因为我是新来的,他们只包含hfer属性。
谢谢
答
据我所知,suckerfish技术不支持双重嵌套列表。这意味着,UL可以嵌套得尽可能深(如果CSS支持它),但它不能做的是同一级别的样式2 UL。
请检查我修订过的HTML(没有双嵌套UL)。
<ul id="nav">
<li style="border-left: none;">
<a href="#">Test link</a>
<ul>
<li>
<a href="#">Test link</a>
</li>
<li>
<a href="#">Test link</a>
</li>
<li>
<a href="#">Test link</a>
<ul>
<li>
<a href="#">Test link 1</a>
</li>
<li>
<a href="#">Test link 2</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Test link</a>
<ul>
<li>
<a href="#">Test link</a>
<ul>
<li>
<a href="#">Test link 1</a>
</li>
<li>
<a href="#">Test link 2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
你也可以check it online。
在附注中,您的项目和第二级UL的CSS似乎需要一些工作(它们现在浮动错误 - 取决于您希望它看起来如何)。
没错,就是这样,没有看到不必要的ULs谢谢 – Court 2010-11-22 20:21:07