下拉菜单，标题垂直居中

Question

编辑：看到有两个人误解了我的意思 - 我会说得很清楚：我正在寻找页脚的 DROP UP 菜单，而不是 DROP DOWN来自 header.

的菜单

这个废话已经困扰我一个星期了。 http://jsfiddle.net/pwg24xbf/1/

我需要将隐藏列表设为下拉菜单。我需要将它们按百分比定位到容器 (BCONT)，这意味着我不能 "position: absolute" 并使用百分比。

此时我不知道该怎么办。真的需要帮助！

总而言之：我需要的是 BCONT 中列表的下拉菜单。我需要 % 的所有尺寸、位置等。不在 PX 中。

此外，我还需要在 BCONT 中垂直居中的列表。

<div id="BCONT">
    <ul>
        <li>CHAT<i id="CABUP" class="fa fa-comment"></i></li>
        <li>LANGUAGE<i id="LGBUP" class="fa fa-chevron-up"></i>
            <ul id="LGBMENU">
                <li>sub1</li>
                <li>sub2</li>
            </ul>
        </li>
        <li>SERVICES<i id="SVBUP" class="fa fa-chevron-up"></i>
            <ul id="SVGMENU">
                <li>sub1</li>
                <li>sub2</li>
            </ul>
        </li>
        <li style="padding-right:12px;">HELP<i id="HPBUP" class="fa fa-chevron-up"></i>
            <ul id="HPBMENU">
                <li>sub1</li>
                <li>sub2</li>
            </ul>
        </li>
    </ul>
</div>

#BCONT {
width: 100%;
height: 4.125%;
background-color: #6779e8;
position: fixed;
bottom: 0px;
font-family:my_fat_font;
overflow: auto;
}
#BCONT ul li {
display: inline-block;
margin-right: 6px;
margin-left: 6px;
padding-right: 6px;
padding-left: 6px;
color:white;
height: 100%;
}
#BCONT ul {
margin: 0px;
height: 100%;
float: right;
vertical-align:middle;
}
#BCONT:after,  {
vertical-align:middle;
}
#BCONT ul li ul {
display: none;
}
#LGBUP, #SVBUP, #HPBUP, #CABUP {
font-size: 20px;
padding-left: 7px;
}

Answer 1

这是我能做的最好的了。抱歉，如果这不是您想要的。

http://jsfiddle.net/pwg24xbf/6/

.outerdiv{
        position:relative;
    }
    #BCONT {
        width: 100%;
        height: 7.125%;
        background-color: #6779e8;
        font-family:my_fat_font;
        overflow: hidden;
    }
    #BCONT .outer-ul>li {
        display: block;
        float:left;
        margin-right: 6px;
        margin-left: 6px;
        padding-right: 6px;
        padding-left: 6px;
        color:white;
        height: 100%;
    }
    #BCONT ul {
        margin: 0px;
        height: 172%;
        float: left;
        vertical-align:middle;
    }
    #BCONT:after,  {
        vertical-align:middle;
    }
    #LGBUP, #SVBUP, #HPBUP, #CABUP {
        font-size: 20px;
        padding-left: 7px;
    }
    .inner-ul > li{
        display:block;
    }
    .inner-ul{
        z-index: 9999;
        position: absolute;
        display: none;
        background-color:black;
    }
    #LGBMENU,#SVGMENU,#HPBMENU{
        float:none !important;
    }
    .outer-ul>li:hover > .inner-ul{
        display:block;
    }

HTML -

  <div class="outerdiv">
    <div id="BCONT">
        <ul class="outer-ul">
            <li>CHAT<i id="CABUP" class="fa fa-comment"></i></li>
            <li>LANGUAGE<i id="LGBUP" class="fa fa-chevron-up"></i>
                <ul class="inner-ul" id="LGBMENU">
                    <li>sub1</li>
                    <li>sub2</li>
                </ul>
            </li>
            <li>SERVICES<i id="SVBUP" class="fa fa-chevron-up"></i>
                <ul class="inner-ul" id="SVGMENU">
                    <li>sub1</li>
                    <li>sub2</li>
                </ul>
            </li>
            <li style="padding-right:12px;">HELP<i id="HPBUP" class="fa fa-chevron-up"></i>
                <ul class="inner-ul" id="HPBMENU">
                    <li>sub1</li>
                    <li>sub2</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

下拉菜单，标题垂直居中

Drop up menu, with headings vertically centered

html

css

position

menu