JS+DIV+CSS 下拉菜单

疗效：

 分享下：

<!--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;}