以下是我菜单的css
#menu
{
position: absolute;
left: 170px;
top: 92px;
background: #336699;
float: left;
z-index:50;
}
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
width: 9em;
float: left;
}
#menu a, #menu h2
{
font: bold 11px/20px arial, helvetica, sans-serif;
display: block;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 4px 3px;
}
#menu h2
{
color: #fff;
background: #336699;
text-transform: uppercase;
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 1px;
border-right-width: 1px;
}
#menu a
{
color: #fff;
background: #79A3CF;
text-decoration: none;
}
#menu a:hover
{
color: #a00;
background: #fff;
}
#menu li
{
position: relative;
}
#menu li ul li
{
position: relative;
width: 12em;
}
#menu ul ul
{
position: absolute;
z-index: 500;
}
#menu ul ul ul
{
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul
{
display: none;
}
div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul
{
display: block;
}
这是我的菜单html设计。这是一个带下拉子菜单的水平菜单
<div id="menu">
<ul>
<li><h2>Computers</h2>
<ul>
<li>subitem
<ul><li>subitems</li>
</li>
<li>submitem</li>
<li>submitem</li>
</li>
<li><h2>Network</h2>
<ul><li>subitems</li>
</li>
</ul>
</div>
我正在使用任何悬停脚本的缩小版本。在这个问题上检查了一些帖子,但无法解决问题。子菜单没有出现在IE6和IE7上。我加入了
<!--[if lt IE 8]>
但没有结果......
答案 0 :(得分:0)
您的HTML格式不佳。 **表示添加。
<div id="menu">
<ul>
<li><h2>Computers</h2>
<ul>
<li>subitem
<ul><li>subitems</li>**</ul>**
</li>
<li>submitem</li>
<li>submitem</li>
**</ul>**
</li>
<li><h2>Network</h2>
<ul><li>subitems</li>**</ul>**
</li>
</ul>
</div>
答案 1 :(得分:0)
检查格式不正确的html和其他html问题的一个好方法是在w3c验证器here中验证你的html。通过使用验证器确保我的html符合,我通常可以清除浏览器差异问题非常容易。