Выпадающее меню в нижнем колонтитуле

Question

Имея огромную проблему, отображая мое раскрывающееся меню как блок, потому что (из того, что я вижу), я испортил наследование. Anywaysm все, что мне нужно, это помощь при отображении выпадающего меню как блока БЕЗ его встроенного.

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: Я знаю - это грязно!

Answer 1

Вам нужно сделать 3 изменения:

1) клетками всплывающего окна являются рядным, потому что вы уже определили Ли должна быть ячейками таблицы (говоря #innerfooter уль Li {дисплей: настольные ячейки;. ...) - это относится к подменю, а также к меню. Так что вам нужно сбросить отображение подменю Ли блокировать:

#langsub #langsubsub li { 
    display : block; 
} 

2) Зафиксировав, что позиционирование всплывающего меню неправильно. Помните, что когда вы позиционируете что-то абсолютно, это будет относиться к последнему нестатическому элементу. В этом случае, если вы хотите расположить всплывающие относительно #langsubsub, так что вы должны сделать эту позицию относительно:

#langsub { 
    position : relative; 
} 

3) Наконец, ваши подменит еще переполнение стопы страницы на этом этапе, потому что вы только компенсируют дно на 40 пикселей. Но есть 4 варианта меню, каждый из которых имеет 40 пикселей, чтобы двигаться вверх. Таким образом, вы должны поднять подменю быть 40px для каждого варианта он имеет:

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

Кроме того, я думаю, что вы, вероятно, хотите, чтобы компенсировать левой части меню, как показано выше, не вправе, слегка поместить подменю в право на его естественное положение?