javascript编程和css问题

javascript programming and css issuse

本文关键字:问题 css 编程 javascript      更新时间:2023-09-26

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

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

例如

代替

top: 350px;
left: 649px;

指定

top: 15%;
left: 15%;

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

首先,给父容器-.app-homediv一个最小宽度,并使其为"position:relative"。接下来,对菜单分区使用右位置而不是左位置。