javascript编程和css问题

Question

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;*/

        }

Answer 1

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

例如

代替

top: 350px;
left: 649px;

指定

top: 15%;
left: 15%;

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