做出这样的菜单效果 鼠标移动上去有效果显示

css hover

<style>
    ul,li{padding:0;margin:0}
    ul.menu>li{position:relative;line-height:25px;display:inline-block;padding:0 10px}
    ul.menu>li .sub{position:absolute;left:0;top:25px;background:#fff;opacity:0;background:#fff;padding:5px;border:solid 1px #ccc;width:120px;transition:opacity .5s linear;text-align:center}
    ul.menu>li:hover .sub{opacity:1}
    ul.menu > li:hover .sub a{display:block;}
</style>
<ul class="menu">
    <li>
        Menu1
        <div class="sub">
            <a href="#">Menu1-1</a>
            <a href="#">Menu1-2</a>
            <a href="#">Menu1-3</a>
        </div>
    </li>
    <li>
        Menu2
        <div class="sub">
            <a href="#">Menu2-1</a>
            <a href="#">Menu2-2</a>
        </div>
    </li>
</ul>