Javascript 内部DIV使外部DIV增长-如何避免？

正如您在我之前的文章中所看到的，我正在开发Office Ribbon的HTML实现，用于web应用程序

当前功能区的外观如下所示：

现在，我创建了一个下拉菜单，因此当您单击项目时，会显示一个下拉菜单，如下所示：

正如您看到的，当下拉列表可见时，“新项目”占用的空间确实会增加。 我希望实现以下目标：

无论是否显示，“新项目”菜单项，其宽度保持不变

在HTML中，下拉项是菜单项的一部分。 下面是要说明的HTML：

<div class="icon bigicon">
    <img src="Resources/Icons/MailNewItemMenu.png" />
    <div class="label">
        New<br/>Items
    </div>
    <div class="menu">
        <div class="menucontents">
            <ul class="nopadding nomargin">
                <li>E-Mail Message</li>
                <li>Appointment</li>
                <li>Meeting</li>
                <li>Contact</li>
                <li>Task</li>
                <li>E-Mail Message Using</li>
                <li>More items</li>
                <li>Lync Meeting</li>
            </ul>
        </div>
    </div>
</div>

如果您对该项目感兴趣，请参阅：

这里有一个JSFIDLE可以用来检查它。在小提琴中，下箭头不显示（不知道为什么），但如果我使用绝对和相对位置进行操作，下箭头将不再显示

有人能看一下JSFIDLE并纠正它吗？ 提前感谢：

亲切问候,

---

凯文

由于没有活生生的例子，我只能提供一些指导：

• 将

  位置：相对
  添加到
  .icon
  或
  .bigicon

• 将

  .icon.菜单

  更改为

  位置：绝对

• 使用

  top:100%

  和适当的

  margin top

  来固定下拉列表的位置，因为它现在将被绝对定位

---

如果您创建一个独立的解决方案，则更容易为您的问题提供特定的解决方案。：）

您可以使用

图标

类在div上设置

位置：relative

然后使用

菜单

类在div上设置

位置：绝对

您还可以设置

top:80px

以更好地定位它

编辑：

---

这里有一把小提琴将我的更改应用到您提供的小提琴上：

您需要设置位置：绝对和z指数：999在class=“menu” 这将把您的（div class=“menu”）带到前面

---

在此之后，您可以根据需要设置（div class=“menu”）位置（左：20px；上：100px；）或任何您想要的位置

您好，感谢您的解释，但上述解决方案均无效。我接受了这里的建议，这里是JSFIDLE，我用你的小提琴的修改版编辑了我的答案。看看它，告诉我它是否适合你。嘿，这已经是非常有前途的事情了。我设法做到了同样的效果，但问题是现在下拉列表中的“Email Message”有两行（第一个条目），我不知道为什么。如果你能为我提供一个解决方案，我将非常感谢：-）再次非常感谢我的“向下”箭头后，文本“新项目”被删除，我不喜欢使用最小宽度。难道没有另一种解决方案可以只说100%或类似的东西吗？对于箭头，只需从

标记中删除

菜单

类。正如我看到的，这是来自javascript。为什么最小宽度不够好？

#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon { text-align: center; display: inline-block; padding-top: 2px; padding-left: 3px; padding-right: 3px; vertical-align: top; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .bigicon { height: 70px; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon { padding-top: 0px; height: 24px; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon:hover { background-color: #cde6f7; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon:active { background-color: #92C0E0; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .label { line-height: 16px; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon { display: inline-block; padding-right: 5px; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon IMG { vertical-align: middle; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .smallicon .label { display: inline-block; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .menu { position: relative; top: -1px; left: 1px; box-shadow: 0px 0px 0px #888888;}
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .menu .menucontents { padding: 1px; position: relative; z-index: 100; background-color: white; left: -4px; border-top: 1px solid #C6C6C6; border-bottom: 1px solid #C6C6C6; background-image: linear-gradient(#C6C6C6, #C6C6C6), linear-gradient(#C6C6C6, #C6C6C6); background-size:1px 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; box-shadow: 1px 1px 2px #E0E0E0; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .menu .menucontents > ul li { text-align: left; list-style: none; margin-left: 1px; margin-right: 1px; padding-left: 5px; padding-right: 5px; }
#OfficeUI .ribbon .tabs > ul li[role=tab] .contents .group .icongroup .icon .menu .menucontents > ul li:hover { background-color: #cde6f7; }