jquery - Bootstrap将下拉菜单放入图像中

Question

我正在尝试在图片中插入带有下拉菜单的按钮。为了创建悬停效果，我依靠这个插件:http://www.backslash.gr/demos/contenthover-jquery-plugin/

在采取必要的CSS预防措施后，一切正常，但我得到的结果并不令人满意，即下拉菜单保留在图像内部而不是在图像顶部，这是错误的事情，因为如果图像太接近，菜单就会被剪切!有更好的方法来获得结果吗？

<img class="hov" src="http://dummyimage.com/300x120/a26/fff" />
           <div class="contenthover">
               <div class="btn-group">
                    <a class="btn dropdown-toggle mybutton" data-toggle="dropdown" href="#">
                        <i class="icon-pencil"></i>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a tabindex="-1" href="#">Modifica</a></li>
                        <li><a tabindex="-1" href="#">Imposta come predefinito</a></li>
                        <li class="divider"></li>
                        <li><a tabindex="-1" href="#">Elimina immagine</a></li>
                    </ul>
               </div>
               <div class="conhov">
                        <p>Description</p>
               </div>
           </div>

这里是演示:http://jsfiddle.net/lughino/Aa9Qd/

Answer 1

将其添加到您的 CSS

.open > .dropdown-menu {
  top: -1px;
  width: 84%;
  left: 3px;
}

随意尝试一下