绝对定位的元素搞乱当浏览器扩展

我创建下拉菜单为我的网站，他们看起来非常漂亮的笔记本电脑分辨率（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

绝对定位的元素搞乱当浏览器扩展

回答

相关问题