Javascript編程和css issuse

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

一種方法是指定的窗口大小的％表示的菜單的位置。

E.g.

而不是

top: 350px; 
left: 649px; 

指定

top: 15%; 
left: 15%; 

這將確保該菜單始終被定位在w.r.t調整窗口大小的寬度。

Answer 2

首先，就是給出一個最小寬度到父容器 - .app-home股利，並使其`位置：相對於」。 接下來，使用正確的位置，而不是左側的菜單股利。