Question

正如您在之前的帖子中看到的那样，我正在开发用于Web应用程序的Office功能区的HTML实现。

目前，功能区看起来像这样：

enter image description here

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

enter image description here

当您看到下拉菜单可见时，“新项目”项目占用的空间会增长。我想实现以下目标：

“新项目”菜单条目如果显示与否则保持相同的宽度。

在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可以用来检查它。在小提琴中没有显示向下箭头（不知道为什么），但如果我使用绝对和相对位置进行操作，则不再显示向下箭头。

有人可以看看JsFiddle，也许可以纠正它吗？提前致谢：http://jsfiddle.net/Complexity/P5Bnc/3/

亲切的问候，

凯文

Answer 1

由于没有实例，我只能提供指导原则：

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

如果您创建一个孤立的JSFiddle，则可以更轻松地为您的问题提供特定的解决方案。：）

Answer 2

您可以使用position:relative类在div上设置icon。

然后在position:absolute类的div上设置menu。

此外，您可以设置top:80px以更好地定位。

修改

这里是一个小提琴，将我的修改应用于您提供的小提琴：fiddle

Answer 3

您需要在 class =“menu”中设置位置：绝对值; 和 z-index：999; 这会将你的（div class =“menu”）带到前面

在此之后你可以随意设置（div class =“menu”）位置（左：20px;顶部：100px;）或任何你想要的

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

3 个答案: