Q:

Drop up menu, with headings vertically centered

EDIT: Seeing as two people have misunderstood what i'm going for - i'll make it perfectly clear: I'm looking for a DROP UP menu from a footer, not a DROP DOWN menu from a header. 
This crap has been bugging me for like a week now. 
http://jsfiddle.net/pwg24xbf/1/
I need to make the hidden lists as a drop up menu. 
I need them to be positioned, percentagewise to the container (BCONT), which means i cannot "position: absolute" and use percentages. 
At this point I don't know what to do.  Really need help! 
In conclusion: What I need is a drop up menu to the list within BCONT.  I need ALL sizes, positions and so on in %.  NOT IN PX. 
Furthermore I need the list VERTICALLY CENTERED within BCONT aswell. 
<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;
}

A:

This is the best I could do.  Sorry if this wasn't what you wanted. 
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>

