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;
}

随意玩它

Bootstrap将下拉菜单放入图像中

1 个答案: