在悬停时显示/隐藏弹出菜单

Question

基本上我想在悬停在块上时显示或隐藏菜单，这里的问题是当包含菜单的cog弄乱了块的结构时，有没有办法显示它而无需推动块？ 这是我的代码：

jQuery(document).ready(function($){
$('li.iconItem').hover(
    function(){
        $('.popover',this).css({display: 'block'});
    },
    function(){
        $('.popover',this).css({display: 'none'});
    }
);

$('.block').hover(
    function(){
        $('.iconsWrap',this).css({display: 'block'});
    },
    function(){
        $('.iconsWrap',this).css({display: 'none'});
    }
);

});

这就是CSS：

    .contextual-links-region {
  outline: none;
  position: relative;
}
.contextual-links-region-active {
  outline: #999 dashed 1px !important;
}
.popover{
    display:block;
    top: -23px;
    left: 26px;
    position:absolute;
    display:none;
}
ul{
    margin:0;
    padding: 0;
    list-style: none;
}
.popover ul li a{
    color: #333 !important;
    display: block;
/*    margin: 0.25em 0;
    padding: 0.25em 1em 0.25em 0.5em;*/
}

.iconItem a i{
    float: left;
}

ul.iconsWrap{}
li.iconItem{display:inline-block; margin-right:10px; position:relative}

请为什么The cog首先出现？
这是我的jsfiddle demo
非常感谢！