絕對定位的元素搞亂當瀏覽器擴展

我創建下拉菜單爲我的網站，他們看起來非常漂亮的筆記本電腦分辨率（1280 x 800），但不幸的是，他們搞砸了非常糟糕的時候都在更大的尺寸比例，他們從分開彼此，儘管他們是絕對的。絕對定位的元素搞亂當瀏覽器擴展

的下拉導航鏈接一個HTML代碼：

<ul class="down-bar" style="list-style:hidden"> 
    <div class="dropdown"> 
     <input type="checkbox" value="drop" id="drop-1" class="dropper"> 
     <li><label class="down-nav" id="down-nav-1" for="drop-1" style="text-decoration:none">Buttons <b class="caret"> &#9660;</b></label></li> 
     <div class="dropdown-menu"> 
      <a href="#" class="fix1"><label class="image1" style="width:30px;height:30px;position:absolute;top:1%;left:3%;cursor:pointer;"></label>Btn</a> 
      <a href="#"><label class="image2" style="width:30px;height:30px;position:absolute;left:3%;top:11%;cursor:pointer;"></label>Btn</a> 
      <a href="#"><label class="image3" style="width:30px;height:30px;position:absolute;left:3%;top:21%;cursor:pointer;"></label>Btn</a> 
      <a href="#" class="fix2"><label class="image4" style="width:30px;height:30px;position:absolute;left:3%;top:31%;cursor:pointer;"></label>Btn</a> 
      <a href="#"><label class="image5" style="width:30px;height:30px;position:absolute;left:3%;top:41%;cursor:pointer;"></label>Btn</a> 
      <a href="#" class="fix3"><label class="image6" style="width:30px;height:30px;position:absolute;left:0.7%;top:51%;cursor:pointer;"></label>Btn</a> 
      <a href="#"><label class="image7" style="width:30px;height:30px;position:absolute;left:0.7%;top:61%;cursor:pointer;"></label>Btn</a> 
      <a href="#" class="fix4"><label class="image8" style="width:30px;height:30px;position:absolute;left:1.5%;top:71%;cursor:pointer;"></label>Btn</a> 
      <a href="#" class="fix5"><label class="image9" style="width:30px;height:30px;position:absolute;left:0.7%;top:81%;cursor:pointer;"></label>Btn</a> 
      <a href="#" class="fix6"><label class="image10" style="width:30px;height:30px;position:absolute;left:1%;top:91%;cursor:pointer;"></label>Btn</a>      
     </div> 
    </div>

請注意，我沒有加準確的原代碼，用於特定目的。類image(n)例如image1，在文本旁邊保留圖片，但fix(n)類用於更長的文本，因此它可以正確適合。（我用文字縮進）。

Full Result。（它包括原始網站按鈕，以獲得確切的支持，嘗試將其縮小和放大）。

我想我使這些下拉菜單的錯誤，並需要使他們與不同的職位類型，這是真的嗎？如果是這樣，那麼我需要改變什麼？

來源

2016-10-22 ShellRox

你的JSFiddle聞起來像CSGO =） – vivekkupadhyay

問題是什麼？真的很難理解這裏出了什麼問題（你會得到什麼和你期望得到什麼？） – Dekel

你的下拉菜單應該和li一起製作。 [下面是關於如何使菜單的完整參考（http://stackoverflow.com/questions/6537270/add-sub-sub-menus-to-a-css-menu-with-sub-menus） – NWNishungry

嘗試通過設置最大寬度爲導航菜單容器固定它。

.down-bar{ 
    max-width: 1200px; /* try different value */ 
}

在放大或縮小時菜單項將保持相同的距離。

來源

2016-10-22 12:53:42 Abk

這是一個非常好的主意！我實際上是想在下拉菜單上做到這一點，非常感謝！ – ShellRox

絕對定位的元素搞亂當瀏覽器擴展

回答

相關問題