0

http://jsfiddle.net/rajkumart08/8p2mZ/2/embedded/result/

当我单击更多选项时会弹出​​一个弹出窗口,但是当我在浏览器使用鼠标时减小宽度和高度时...弹出窗口不会与更多选项 div 一起移动...

我该如何解决这个问题?请帮忙。

我的代码在这里:http: //jsfiddle.net/rajkumart08/8p2mZ/3/

.openme {
            display: inline-block;
            padding: 10px;
            cursor: pointer;
            padding: 0;
            margin: 0 20px 0 0;
            width: 200px;
            height: 200px;
            list-style-type: none;
            background: white;
            border: 1px solid #999;
            line-height: 200px;
            padding: 0;
        }

        #menu{
            display: inline-block;
            opacity: 0;
            visibility: hidden;
            position: absolute;
            padding:0px;
            border: solid 1px #000;
            margin: 0 auto 0 auto;
            background: white;
            top: 350px;
            left: 649px;
            -webkit-box-shadow: 0px 2px 13px rgba(50, 50, 50, 0.48);
        }
        #menu.show {
            opacity: 1;
            visibility: visible;
        }

        #menu a{
            float:left;
            /*margin: 7px;*/
            padding: 10px 20px;
            font-weight: bold;
            font-size: 10px;
            text-align: center;
            background: white;
            color: black;
            word-wrap: normal;
            /*border: 1px solid red;*/

        }
4

2 回答 2

0

首先,事情是给父容器一个最小宽度 - .app-homediv 并使其成为“位置:相对”。接下来,为菜单 div 使用右位置而不是左位置。

于 2012-08-22T07:31:57.483 回答
0

一种方法是根据窗口大小的百分比来指定菜单的位置。

例如

代替

top: 350px;
left: 649px;

指定

top: 15%;
left: 15%;

这将确保菜单在调整大小时始终位于窗口宽度。

于 2012-08-22T03:13:34.187 回答