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

Question

您可能已经在我以前的帖子中看到，我正在研究 Office 功能区的 HTML 实现，以用于 Web 应用程序。

目前功能区是这样的:

现在，我创建了一个下拉菜单，所以当您单击元素时，会显示一个下拉菜单，如下所示:

如您所见，当下拉菜单可见时，元素“新元素”占用的空间确实增加了。 我想实现以下目标:

1. 无论是否显示，“新元素”菜单项都保持相同的宽度。

在 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>

CSS 如下(我知道这不是最佳实践，我将对其进行调整):

#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; }

如果您对该元素感兴趣，请查看:https://github.com/Kevin-De-Coninck/OfficeWebControls

这里有一个 JsFiddle 可以用来检查它。在 fiddle 中，向下箭头没有显示(不知道为什么)，但是如果我用绝对位置和相对位置来解决这个问题，向下箭头就不再显示了。

有人可以看看 JsFiddle 并更正它吗？ 提前致谢:http://jsfiddle.net/Complexity/P5Bnc/3/

亲切的问候，

凯文

Answer 1

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

• 将position: relative添加到.icon或.bigicon
• 将 .icon .menu 更改为 position:absolute
• 通过使用 top:100% 和适当的 margin-top 修复下拉列表的位置，因为它现在将被绝对定位

如果您创建一个隔离的 JSFiddle , 为您的问题提供特定的解决方案会更容易。 :)