下拉菜单的实现

• 布局一个菜单

<div class="Info-myself">
            <div id="info-Icon">
                <div class="info-headImg"></div>
                <span class="info-myname">Hi Effi</span>
                <span class="down"></span>
            </div>
            <div id="myInfo">
                <div class="myTriangle"></div>
                <ul id="info-herf">
                    <li class="glyphicon glyphicon-user"><a href="#">My Profile</a></li>
                    <li class="glyphicon glyphicon-list-alt"><a href="#">Accout Setting</a></li>
                    <li class="glyphicon glyphicon-send"><a href="#">Help</a></li>
                    <li class="cut-off"></li>
                    <li class="glyphicon glyphicon-shopping-cart purchase"><a href="#">Purchase</a></li>
                </ul>
            </div>
        </div>

效果如下

- jquery

$("#info-Icon").click(function () {
        $("#myInfo").toggle()
    })
    $("#info-herf").click(function () {
        $("#myInfo").hide()
    })