原生js实现下拉菜单

Posted 2020-10-14 轻笑苍穹

简单给两段代码：

html和css部分：

<style>
        .one li{ width:100px; height:30px; line-height:30px; background:url(nav/libg.jpg) no-repeat; float:left; text-align:center; margin-left:10px; cursor:pointer; _display:inline; position:relative;}
        li ul{ position:absolute; left:0; top:30px; display:none;}
</style>
<ul class="one">
        <li id="li01">
            <span>一级菜单</span>
            <ul id="ul01">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li id="li02">
            <span>一级菜单</span>
            <ul id="ul02">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li id="li03">
            <span>一级菜单</span>
            <ul id="ul03">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>

javascript部分：

function fn(canshu1,canshu2){
    var li01 = document.getElementById(canshu1);
    var ul01 = document.getElementById(canshu2);
    
    li01.onmouseover = function(){
        ul01.style.display = "block"    
    }
    li01.onmouseout = function(){
        ul01.style.display = "none"    
    }
}
fn("li01","ul01")    
fn("li02","ul02")    
fn("li03","ul03")    

亮个效果图：