2

我正在尝试在图片中插入一个带有下拉菜单的按钮。为了创建悬停效果，我依靠这个插件：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/

4

1 回答 1

1

将此添加到您的CSS

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

随意玩弄它

于 2013-03-09T15:53:19.570 回答