水平和垂直菜单实例

============ myCSS.css ==============

#em_menu *{padding:0px;margin:0px;}
#em_menu ul{padding:0px;margin:0px;}
#em_menu li{list-style:none;}
#em_menu ul>li{
    background-image:url("../IMAGE/ku.jpg");
    background-repeat: no-repeat;
}
#em_menu ul li ul li{ background-image: url("../IMAGE/xku.jpg");background-repeat: no-repeat;}
#em_menu ul a{display:block;width:150px;height:40px;
    line-height:39px;
    text-align:center;
    text-decoration:none;
}
#em_menu ul ul{display:none;}
#em_menu ul li>a{position:relative;color: #01b3b4;}
#em_menu ul li>a div{
    width:0px;height:0px;
    border:8px solid transparent;
    border-left-color:#02feff;
    position:absolute;
    left:10px;
    top:13px;
    box-shadow: 0 0 5px white;
}
#em_menu ul li ul a{color:black;}

============ myQuery.js ==============

$(document).ready(function () {
    $("#em_menu>ul").last().children("li").css("float","left");
    $("#em_menu>ul").first().children("li").children("a").on("click",function () {
        $(this).next().slideToggle("normal");
        changeM($(this).children("div"));
    });
    $("#em_menu>ul").eq(1).children("li").hover(function () {
        $(this).children("ul").slideDown("normal");
        changeM($(this).find("div"));
    },function () {
        $(this).children("ul").slideUp("normal");
        changeM($(this).find("div"));
    });
});
function changeM(node) {
    if(node){
        if(node.css("borderTopColor")=="rgba(0, 0, 0, 0)"){
            node.css({border:"8px solid transparent",borderTopColor:"#02feff"});
        }else{
            node.css({border:"8px solid transparent",borderLeftColor:"#02feff"});
        }
    }
}

============ index.html ==============

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../CSS/myCSS.css"/>
    <script src="../../JS/jquery-3.3.1.min.js"></script>
    <script src="../../JS/myQuery.js"></script>
</head>
<body>
    <div id="em_menu">
        <!--水平菜单栏-->
        <ul>
            <li>
                <a href="#"><div></div>HTML</a>
                <ul>
                    <li><a href="#">part1</a></li>
                    <li><a href="#">part2</a></li>
                    <li><a href="#">part3</a></li>
                </ul>
            </li>
            <li>
                <a href="#"><div></div>CSS</a>
                <ul>
                    <li><a href="#">part1</a></li>
                    <li><a href="#">part2</a></li>
                    <li><a href="#">part3</a></li>
                </ul>
            </li>
            <li>
                <a href="#"><div></div>jQuery</a>
                <ul>
                    <li><a href="#">part1</a></li>
                    <li><a href="#">part2</a></li>
                    <li><a href="#">part3</a></li>
                </ul>
            </li>
        </ul>
        <br/>
        <!--垂直菜单栏-->
        <ul>
            <li>
                <a href="#"><div></div>HTML</a>
                <ul>
                    <li><a href="#">part1</a></li>
                    <li><a href="#">part2</a></li>
                    <li><a href="#">part3</a></li>
                </ul>
            </li>
            <li>
                <a href="#"><div></div>CSS</a>
                <ul>
                    <li><a href="#">part1</a></li>
                    <li><a href="#">part2</a></li>
                    <li><a href="#">part3</a></li>
                </ul>
            </li>
            <li>
                <a href="#"><div></div>jQuery</a>
                <ul>
                    <li><a href="#">part1</a></li>
                    <li><a href="#">part2</a></li>
                    <li><a href="#">part3</a></li>
                </ul>
            </li>
        </ul>
        <div style="clear:both"></div>
    </div>
</body>
</html>

效果图展示: