Question

将我的dropup菜单显示为块有一个巨大的问题，因为（从我可以看到）我搞砸了继承。无论如何，我需要的是帮助将dropup菜单显示为block而不是内联。

<div id="footer"> <span id="innerfooter">
        <ul>
            <li style="border-left:0px;">CHAT<i id="bottommenuicon2" class="fa fa-comment"></i></li>
            <li id="langsub">LANGUAGE<i id="bottommenuicon3" class="fa fa-chevron-up"></i>
                <ul id="langsubsub">
                    <li id="langsubsub1">submenu1</li>
                    <li>submenu2</liclass>
                    <li>submenu3</li>
                    <li>...</li>
                </ul>
            </li>
            <li style="border-right:0px;">SERVICES<i id="bottommenuicon1" class="fa fa-chevron-up"></i></li>
        </ul>
    </span>

</div>

#footer {
position:fixed;
left:0px;
bottom:0px;
height:40px;
width:100%;
background-color: #6779e8;
border-top: 1px;
margin:0 auto;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop ? document.documentElement.scrollTop :       document.body.scrollTop))+'px');
}
#innerfooter {
font-family:my_fat_font;
float: right;
height:100px;
}
#innerfooter ul {
position: relative;
height:100%;
margin:0px;
}
#innerfooter ul li {
display: table-cell;
padding-right: 10px;
font-family:my_fat_font;
font-size: 16px;
color: white;
line-height: 40px;
padding-left: 20px;
padding-right: 20px;
border-right:inset 1px;
border-right-color: #233CCB;
border-left:inset 1px;
background-color: #6779e8;
border-left-color: ##9A9A9A;
}
#innerfooter ul li:hover {
color: #ff9f2d;
}
#bottommenuicon2 {
padding-left:7px;
font-size: 20px;
}
#bottommenuicon1 {
padding-left:7px;
font-size: 20px;
}
#bottommenuicon3 {
padding-left:7px;
font-size: 20px;
}
#langsubsub {
display: none;
}
#langsub:hover #langsubsub {
display: block;
bottom: 40px;
position: absolute;
right:40px;
}

PS：我知道 - 这太乱了！

Answer 1

您需要进行3次更改：

1）popup的单元格是内联的，因为你已经指定li应该是表格单元格（通过说#innerfooter ul li {display：table-cell; ....） - 这也适用于子菜单作为菜单。因此，您需要重置子菜单的显示以阻止：

#langsub #langsubsub li {
    display : block;
}

2）修正后，弹出菜单的定位错误。请记住，当您绝对定位某些内容时，这将相对于最后一个非静态元素。在这种情况下，您希望将弹出窗口相对于#langsubsub定位，因此您必须使该位置相对：

#langsub {
    position : relative;
}

3）最后，你的子菜单在这个阶段仍会溢出页面底部，因为你只能将底部偏移40px。但是有4个菜单选项，每个40px高，以便向上移动。所以你需要将每个选项的子菜单提升40px：

#langsub:hover #langsubsub {
    display: block;
    bottom: 160px;
    position: absolute;
    left:40px;
}

另外我想你可能想要偏移子菜单的左边，如上图所示，而不是右边，将子菜单略微放在它自然位置的右边？

在页脚中放下菜单

1 个答案: