Search code examples
htmlcssinheritanceblockinline

Drop up menu in footer

Having a huge problem displaying my dropup menu as block because (from what i can see) i've messed up the inheritance. Anywaysm all I need is help on displaying the dropup menu as block WITHOUT it being inline.

http://jsfiddle.net/65tnncL1/1/

<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: I know - It's messy!

Solution

  • You need to make 3 changes:

    1) the cells of the popup are inline because you've already specified li's should be table cells (by saying #innerfooter ul li {display: table-cell; ....) - this applies to the submenu as well as the menu. So you need to reset the display of the submenu li's to block:

    #langsub #langsubsub li {
    display : block;
}

    2) Having fixed that, the positioning of the popup-menu is wrong. Remember that when you position something absolutely, this will be relative to the last non-static element. In this case you want to position the popup relative to the #langsubsub, so you must make that position relative:

    #langsub {
    position : relative;
}

    3) Finally, your submenu will still overflow the foot of the page at this stage, because you have only offset the bottom by 40px. But there are 4 menu options each 40px high to move up. So you need to raise the submenu be 40px for each option it has:

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

    Also I think you probably want to offset the left of the submenu as shown above, not the right, to place the submenu slightly to the right of it's natural position?