疗效:
分享下:
<!--HTML //-->
<div id="MainMenu">
<div class="left">
<ul id="nav">
<li><a href="#"><%=Resources.lang.index%></a></li>
<li><a href="#"><%=Resources.lang.diary%></a></li>
<li><a href="#"><%=Resources.lang.albums%></a></li>
<li><a href="#"><%=Resources.lang.society%></a></li>
<li><a href="#"><%=Resources.lang.game%></a></li>
<li οnmοuseοver="showmenu(this)" οnmοuseοut="hidemenu(this)"><a href="#"><%=Resources.lang.set%></a>
<div id="menulayer" style="display:none;">
<ul>
<li><a href="#">资料编辑</a></li>
<li><a href="#">皮肤设置</a></li>
<li><a href="#">系统设置</a></li>
<li><a href="#">安全设置</a></li>
</ul>
</div>
</li>
</ul>
</div>
/* css:// */
#nav
{
position :relative;
margin:0px;
padding:0 0 0 10px ;
line-height:30px;
}
#nav li
{
list-style-type :none;
float:left;
margin:0px;
height:30px;
}
#nav li a
{
color:White;
font-weight:bold;
padding:5px 10px 5px 10px;
}
#nav li a:hover
{
text-decoration:none;
}
#menulayer ul
{
border:solid 1px #4b6292;
margin:0 0 0 10px;
padding:3px 0 3px 0;
background-color:#FFFFFF;
width:120px;
}
#menulayer li
{
float:none;
text-align:center;
padding:0px;
margin:0px;
height:25px;
line-height:27px;
}
#menulayer li a
{
padding:0px;
font-size: 12px;
color: #4b6292;
font-weight: normal;
display:block;
}
//js://
//弹出菜单
function showmenu(obj) {
var localdiv = obj.getElementsByTagName("div")[0];
localdiv.style.display = "block";
var localli = localdiv.getElementsByTagName("li");
for (i = 0; i < localli.length; i++) {
localli[i].onmouseover = function() {
this.style.backgroundColor = "#4b6292";
var locala = this.getElementsByTagName("a")[0];
locala.style.color = "#FFFFFF";
}
localli[i].onmouseout = function() {
this.style.backgroundColor = "";
var locala = this.getElementsByTagName("a")[0];
locala.style.color = "";
}
}
}
//隐藏菜单
function hidemenu(obj) {
var localdiv = obj.getElementsByTagName("div")[0];
localdiv.style.display = "none";
}
.....在ie6下测试了下 结果发现天地倒转了...
改写了css
.nav
{
position:static;
margin:0px;
padding:0 0 0 10px ;
line-height:30px;
}
.nav li
{
list-style-type :none;
float:left;
margin:0px;
height:30px;
}
.nav li a
{
color:#FFFFFF;
font-weight:bold;
display:block;
padding: 0 10px 0 10px;
}
.nav li a:hover
{
color:#FFFFFF;
text-decoration:none;
background-color:#3777bc;
}
.nav li a:visited{color:#FFFFFF;}
.menulayer ul
{
position :absolute;
border:solid 1px #4b6292;
margin:0;
padding:3px 0 3px 0;
background-color:#FFFFFF;
width:120px;
}
.menulayer li
{
float:none;
text-align:center;
padding:0px;
margin:0px;
height:25px;
line-height:28px;
}
.menulayer li a
{
padding:0px;
font-size: 12px;
color: #4b6292;
font-weight: normal;
display:block;
}
.menulayer li a:hover
{
background-color:Transparent;
}
.menulayer li a:visited
{
color:#4b6292;
}
.menulayer #selfoption{background: #fefefe url('images/topmenu_self.png') no-repeat 8px 5px;}
.menulayer #skinoption{background: #fefefe url('images/topmenu_skin.png') no-repeat 8px 5px;}
.menulayer #sysoption{background: #fefefe url('images/topmenu_set.png') no-repeat 8px 5px;}
.menulayer #safeoption{background: #fefefe url('images/topmenu_safe.png') no-repeat 8px 5px;}