Drop up menu, with headings vertically centered - html

Question

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

Answer 1

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>