简易下拉菜单

效果图：

thml :

<span class="list-menu">
　　操作 ＋
　　<ul class="menu">
　　　　<li class="menu-item"><a href="">编辑</a></li>
　　　　<li class="menu-item"><a href="">预览</a></li>
　　　　<li class="menu-item"><a href="">领取</a></li>
　　　　<li class="menu-item"><a href="">详情</a></li>
　　　　<li class="menu-item read"><a href="">删除</a></li>
　　</ul>
</span>

css:

.menu{position: fixed;background-color: #fff;border: 1px solid #83b266;z-index: 99;display: none;min-width: 100px;color: #4e4e4e;
-moz-box-shadow:0px 0px 3px #83b266;/*firefox*/
-webkit-box-shadow:0px 0px 3px #83b266;/*webkit*/
box-shadow:0px 0px 3px #83b266;/*opera或ie9*/ }
.menu .menu-item a{display: block;line-height: 26px;padding: 0 10px; color: inherit;min-width: max-content;text-align: left;border-bottom: 1px solid #e1e1e1;}
.menu .menu-item:last-child a{border-bottom: none;}
.menu .menu-item.read{color: #f65622;}
.menu .menu-item:hover{background-color: #c3dfb2;}
.list-menu.menu-active .menu{display: block;}

javascript :

依赖JQ

$(document).click(function(e){
　　if(e.target.className.indexOf('list-menu') != -1){
　　　　var that = $(e.target);
　　　　var w = 0;
　　　　var h = 0;
　　　　if(that.hasClass('menu-active')){
　　　　　　that.removeClass('menu-active');
　　　　}else{
　　　　　　$('.list-menu').removeClass('menu-active');
　　　　　　that.addClass('menu-active');
　　　　}

　　　　if( ( $('.menu').width() + that.offset().left ) > $(window).width() ){
　　　　　　w = that.offset().left-($('.menu').width()-that[0].offsetWidth+2);

　　　　}else{
　　　　　　w = that.offset().left;
　　　　};

　　　　if( ( $('.menu').height() + that.offset().top+that[0].offsetHeight - $(window).scrollTop() ) > $(window).height() ){
　　　　　　h = that.offset().top-($('.menu').height()+2)- $(window).scrollTop();
　　　　}else{
　　　　　　h = that.offset().top+that[0].offsetHeight- $(window).scrollTop();
　　　　}

　　　　that.children('.menu').css({left: w, top: h})
　　}else{
　　　　$('.list-menu').removeClass('menu-active')
　　}
})
$(window).scroll(function(){
　　$('.list-menu').removeClass('menu-active')
})