为了实现某种菜单效果，已经忙碌了好多天，依旧存在一些问题没有解决。菜单样式如下：
最初设想是用下拉框，已经实现了消除下拉框的难看边线，但是必须点击才能显示内容，而且下拉框右侧的小三角无法设置样式，暂时放弃了；曾经使用过纯CSS的菜单，兼容IE7和FF，基本实现设计样式，但是在IE6下，二级菜单无法显示，又不得不放弃了；网上有人发文说用if豫剧判断IE6或者IE7对代码作改变可实现兼容，如下：
在前一种情况中的UL前加如下代码：<!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]-->
UL后加如下代码 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
但是问题依旧存在。
最后干脆使用全div的形式，对IE6的兼容更进了一步，菜单样式如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
" http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body{ margin:0px auto; width:768px; }
*{text-decoration:none!important; }
.pmHorizontalBottomOut{background-color: #999 !important; }
.pmHorizontalBottomOut .level{ /
width:120px;
height:17;
position:relative;
display:block;
background-color: D8D8D8;
padding:0px 2px;
margin:0px 1px 0px 0px;
float:left;
}
.pmHorizontalBottomOut .level:hover {
background-color: 6633FF;
color: FFFFFF;
}
.pmHorizontalBottomOut .level_{display:none; }
.pmHorizontalBottomOut .level:hover .level_ {
top:-50px;
left:45px;
display:block;
width:124px;
height:auto;
margin:0px -2px 0px -2px;
background-color: EFEFEF;
position:absolute;
}
.pmHorizontalBottomOut .level:hover .level_ .level_title {
font-weight:bold;
background-color: A7ADFE;
color:white;
}
.pmHorizontalBottomOut .level:hover .level_ a:hover {
background-color: F83658;
color:white;
}
.pmHorizontalBottomOut .level_ * {
display:block;
color:black;
padding:0px 2px;
}
.levelIe{
width:120px;
height:17;
position:relative;
display:block;
background-color: D8D8D8;
padding:0px 2px;
margin:0px 1px 0px 0px;
float:left;
}
.levelIe {
background-color: 6633FF;
color: FFFFFF;
}
.levelIe .level_ {
left:45px;
top:-50px;
display:block;
width:124px;
height:auto;
margin:0px -2px 0px -2px;
background-color: EFEFEF;
position:absolute;
}
.levelIe .level_ .level_title {
font-weight:bold;
background-color: A7ADFE;
color:white;
}
.levelIe .level_ a:hover {
background-color: F83658;
color:white;
}
.levelIe .level_ * {
display:block;
color:black;
padding:0px 2px;
}
</style>
<script type="text/javascript">
//<![CDATA[
if (navigator.appName=="Microsoft Internet Explorer") {
function fPmHorizontalBottomOut() {
var getItem = document.getElementById("pmHorizontalBottomOut").getElementsByTagName("div");
for (var i=0; i<getItem.length; i++) {
getItem[i].onmouseover=function() {
if( this.className=="level"){
this.className="levelIe";
}
}
getItem[i].onmouseout=function() {
if( this.className=="levelIe"){
this.className="level";
}
}//css popup menu script by shawl.qiu
}
}
window.onload=fPmHorizontalBottomOut;
}
//]]>
</script>
</head>
<body>
<p/><p/><p/><p/><p/>
<div class="pmHorizontalBottomOut" id="pmHorizontalBottomOut">
<div class="level" style="margin-top:30px;">
<div class="levelTitle">level</div>
<div class="level_">
<div class="level_title">level_ title</div>
<a href="?cat=level&id=1">level_ title 1</a>
<a href="?cat=level&id=2">level_ title 2</a>
<a href="?cat=level&id=3">level_ title 3</a>
<a href="?cat=level&id=4">level_ title 4</a>
<a href="?cat=level&id=5">level_ title 5</a>
</div>
</div>
<div class="level" style="margin-top:60px;margin-left:-125px;">
<div class="levelTitle">level 1</div>
<div class="level_">
<div class="level_title">level_ title</div>
<a href="?cat=level_1&id=1">level_ title 1</a>
<a href="?cat=level_1&id=2">level_ title 2</a>
<a href="?cat=level_1&id=3">level_ title 3</a>
<a href="?cat=level_1&id=4">level_ title 4</a>
<a href="?cat=level_1&id=5">level_ title 5</a>
</div>
</div>
<div class="level" style="margin-top:90px;margin-left:-125px;">
<div class="levelTitle">level 2</div>
<div class="level_">
<div class="level_title">level_ title</div>
<a href="?cat=level_2&id=1">level_ title 1</a>
<a href="?cat=level_2&id=2">level_ title 2</a>
<a href="?cat=level_2&id=3">level_ title 3</a>
<a href="?cat=level_2&id=4">level_ title 4</a>
<a href="?cat=level_2&id=5">level_ title 5</a>
</div>
</div>
<div class="level" style="margin-top:120px;margin-left:-125px;">
<div class="levelTitle">level 3</div>
<div class="level_">
<div class="level_title">level_ title</div>
<a href="?cat=level_3&id=1">level_ title 1</a>
<a href="?cat=level_3&id=2">level_ title 2</a>
<a href="?cat=level_3&id=3">level_ title 3</a>
<a href="?cat=level_3&id=4">level_ title 4</a>
<a href="?cat=level_3&id=5">level_ title 5</a>
</div>
</div>
<div class="level" style="margin-top:150px;margin-left:-125px;">
<div class="levelTitle">level 4</div>
<div class="level_">
<div class="level_title">level_ title</div>
<a href="?cat=level_4&id=1">level_ title 1</a>
<a href="?cat=level_4&id=2">level_ title 2</a>
<a href="?cat=level_4&id=3">level_ title 3</a>
<a href="?cat=level_4&id=4">level_ title 4</a>
<a href="?cat=level_4&id=5">level_ title 5</a>
</div>
</div>
</div>
</body>
</html>
虽然在IE6中二级菜单已经可以正常显示，但是出现了二级菜单与右侧内容重叠的情况，难道真的没有完美兼容的菜单吗？
其实在解决问题的过程中也在不断寻找新的方法，其中Amazon首页左侧菜单当属兼容典范，某高人的blog右侧的菜单也是完全兼容所有浏览器，但是仅仅分析代码已经让人头痛，貌似实在太复杂了。期待简单而完美之作的呈现。我的砖抛至此，大侠们快点献玉吧！
续：经过多方实验和求证，总觉得第三种方法出现重叠只是层布局的问题，尝试了改变div层的载入顺序，宣告失败，尝试了设置z-index，继续失败......偶然间发现，z-index设置中有个技巧，即重叠的两个层其中之一必须是position为absolute，终于找到了问题的关键，我的菜单终于全部兼容，实在太高兴了～～
Comments