Question

编辑：看到两个人误解了我想要的东西 - 我会非常清楚：我正在寻找一个页脚的DROP UP菜单，而不是标题中的DROP DOWN菜单。

这个废话一直困扰着我一周。 http://jsfiddle.net/pwg24xbf/1/

我需要将隐藏列表作为下拉菜单。我需要将它们定位在容器（BCONT）的百分比位置，这意味着我不能＆＃34;位置：绝对＆＃34;并使用百分比。

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

总结：我需要的是BCONT内列表中的下拉菜单。我需要所有尺寸，位置等等。不在PX。

此外，我还需要BCONT内的VERTICALLY CENTER列表。

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

下拉菜单，标题垂直居中

1 个答案: