div + css 兼容性问题.IE7 跟 FF 可以显示二级菜单,IE6不能显示

CSS代码:#nav{line-height:25px;height:25px;list-style-type:none;position:relative;paddin... CSS代码:
#nav
{
line-height: 25px;
height: 25px;
list-style-type: none;
position: relative;
padding: 0px;
margin: 0px;
width: 93%;
text-align: center;
float:right;
}
#nav A
{
font-family: "宋体";
font-size: 13px;
font-weight: bold;
color: #002a43;
display: block;
width:78px;
height:24px;
text-align: center;
text-decoration: none;
background:orange
}
#nav A:link
{
color: #002a43;
text-decoration: none;
}
#nav A:visited
{
color: #002a43;
text-decoration: none;
}
#nav A:hover
{
color: #fff;
background-color: red;
width:78px; display:block; height:24px;
}
#nav LI
{
width: 78px;
float: left;
position: relative;
margin-left:1px;
}
#nav ul
{
visibility: hidden;
position: absolute;
height: 36px;
top: 24px;
right: -305px;
width: 620px;
z-index: 25;
background:#ddd;
padding:0;
list-style:none;
}
#nav :hover
{
white-space: normal;
text-decoration: none;
}

#nav li:hover ul, #nav a:hover ul
{
visibility: visible;
height: 36px;
margin-top: 0px;
text-align: center;
}
#nav :hover ul li
{
font-weight: normal;
height: 24px;
width: 76px;
display: block;
position: relative;
border-collapse: collapse;
background-image: none;
}
#nav :hover ul li a
{
font-size: 13px;
height: 24px;
line-height: 2.0em;
float: left;
padding: 0 1px;
color: #000000;
background: none;
}
#nav :hover ul li a:hover
{
color: #fff;
background: green;
line-height: 2.0em;
}
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="common.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
ul li {cursor:pointer;}
-->
</style>
</head>

<body>
<ul id='nav'>
<li><a>首 页</a></li>
<li><a>学校推介</a></li>
<li><a>教育新闻</a></li>

<li><a>作品展示</a>
<ul>
<li><a>小学作品</a></li>
<li><a>初中作品</a></li>
<li><a>高中作品</a></li>
</ul>
</li>

<li><a>家长学校</a>
<ul>
<li><a>典型案例</a></li>
<li><a>心理健康</a></li>
<li><a>佳作推介</a></li>
<li><a>家教智囊</a></li>
<li><a>教子有方</a></li>
<li><a>成才之路</a></li>
<li><a>人物传记</a></li>
<li><a>安全教育</a></li>
</ul>
</li>

<li><a>招生考试</a>
<ul>
<li><a>招考信息</a></li>
<li><a>招考政策</a></li>
</ul>
</li>

<li><a>学习资源</a></li>
<li><a>学生健康</a></li>
<li><a>学校登陆</a></li>
<li><a>博 客</a></li>
<li><a>学校展示</a></li>

</ul>
</body>
</html> 展开
 我来答
3个回答
#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？
书风笑
推荐于2016-01-15 · TA获得超过288个赞
知道小有建树答主
回答量：178
采纳率：0%
帮助的人：200万
我也去答题访问个人页
展开全部
懒得改那么多了，改了一个！
IE6不行是因为不支持li:hover
用a标签加表格的嵌套，可以实现E6下的下拉。
作品展示 菜单你在IE6下试试，具体样式有需要兼容调整，自己改改！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="common.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#nav
{
line-height: 25px;
height: 25px;
list-style-type: none;
position: relative;
padding: 0px;
margin: 0px;
width: 93%;
text-align: center;
float:right;
}
#nav A
{
font-family: "宋体";
font-size: 13px;
font-weight: bold;
color: #002a43;
display: block;
width:78px;
height:24px;
text-align: center;
text-decoration: none;
background:orange
}
#nav A:link
{
color: #002a43;
text-decoration: none;
}
#nav A:visited
{
color: #002a43;
text-decoration: none;
}
#nav A:hover
{
color: #fff;
background-color: red;
width:78px; display:block; height:24px;
}
#nav LI
{
width: 78px;
float: left;
position: relative;
margin-left:1px;
}
#nav ul
{
visibility: hidden;
position: absolute;
height: 36px;
top: 24px;
right: -305px;
width: 620px;
z-index: 25;
background:#ddd;
padding:0;
list-style:none;
}
#nav :hover
{
white-space: normal;
text-decoration: none;
}

#nav li:hover ul, #nav a:hover ul
{
visibility: visible;
height: 36px;
margin-top: 0px;
text-align: center;
}
#nav :hover ul li
{
font-weight: normal;
height: 24px;
width: 76px;
display: block;
position: relative;
border-collapse: collapse;
background-image: none;
}
#nav :hover ul li a
{
font-size: 13px;
height: 24px;
line-height: 2.0em;
float: left;
padding: 0 1px;
color: #000000;
background: none;
}
#nav :hover ul li a:hover
{
color: #fff;
background: green;
line-height: 2.0em;
}

<!--
ul li {cursor:pointer;}
-->
</style>
</head>

<body>
<ul id='nav'>
<li>
<a>首 页</a></li>
<li><a>学校推介</a></li>
<li><a>教育新闻</a></li>

<li><!--[if lte IE 6]>
<a href="#nogo"><table><tr><td>
<![endif]--><a>作品展示</a>
<ul>
<li><a>小学作品</a></li>
<li><a>初中作品</a></li>
<li><a>高中作品</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table></a>
<![endif]-->

</li>

<li><a>家长学校</a>
<ul>
<li><a>典型案例</a></li>
<li><a>心理健康</a></li>
<li><a>佳作推介</a></li>
<li><a>家教智囊</a></li>
<li><a>教子有方</a></li>
<li><a>成才之路</a></li>
<li><a>人物传记</a></li>
<li><a>安全教育</a></li>
</ul>
</li>

<li><a>招生考试</a>
<ul>
<li><a>招考信息</a></li>
<li><a>招考政策</a></li>
</ul>
</li>

<li><a>学习资源</a></li>
<li><a>学生健康</a></li>
<li><a>学校登陆</a></li>
<li><a>博 客</a></li>
<li><a>学校展示</a></li>

</ul>
</body>
</html>
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
百度网友f550c7b
2011-04-29 · TA获得超过144个赞
知道答主
回答量：123
采纳率：0%
帮助的人：61.7万
我也去答题访问个人页
展开全部
这是浏览器兼容问题，ie6不识别hover，你可以用js或者jquery实现
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
依土天羽
2011-04-29 · TA获得超过289个赞
知道小有建树答主
回答量：337
采纳率：100%
帮助的人：401万
我也去答题访问个人页
展开全部
ie6貌似不支持
#nav :hover ul li a:hover
这样的css
用javascript实现吧
已赞过 已踩过<
你对这个回答的评价是？
评论 收起
收起 更多回答（1）
推荐律师服务： 若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

为你推荐：

下载百度知道APP，抢鲜体验
使用百度知道APP，立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

京ICP证030173号-1   京网文【2023】1034-029号     ©2025Baidu  使用百度前必读 | 知道协议 | 企业推广

辅 助

模 式