Подменю не отображается в NavBar

Question

У меня есть this JsFiddle с отзывчивым (ну, сорт) макетом.

Однако, я изо всех сил, чтобы найти способ добавления «подраздел» к нему (что делает его похожим на меню/аккордеон нав.

Я не лучший/(любой по этому вопросу) знание CSS , и поэтому любая помощь очень ценится

отрывок из CSS:

@media only screen and (max-width : 860px){ 
    .text{ 
    display:none; 
    } 

    .nav-container , a{ 
    width: 70px; 

    } 

    a:hover{ 
    width:200px; 
    z-index:1; 
    border-top: 1px solid rgba(255,255,255,0.1); 
    border-bottom: 1px solid black; 
    box-shadow: 0 0 1px 1px black; 
    } 

    a:hover .text { 
    display:block; 
    padding-left:30%; 
    } 
} 
@media only screen and (max-width : 480px){ 
    .nav-container, a{ width:50px;} 
    span[class ^= "icon"]{ left:8px;} 
} 

Я пытаюсь создать его таким образом, чтобы иметь «подменю» как:

+----------------+-----+ 
|    |  | 
||Menu1   |  | 
| |sub menuA  | ||| | 
||Menu2   |  | 
| |sub menuB  |  | 
|    |  | 
+----------------+-----+ 
        ^
        | 
       DevExpress content splitter 

Как я должен структурировать свой класс subChild, чтобы достичь этого?

моя функция до сих пор:

$('li').click(function() { 

    $(this).addClass('active') 
     .siblings() 
     .removeClass('active'); 
}); 

Любые советы/помощь очень ценится.

Updated Fiddle который, как мой проект в настоящее время отображения (или «не» по этому вопросу: L) - Вы должны будете извинить встроенный стиль, это было в основном из так много испытаний/и т.д.

Answer 1

РЕШИТЬ!

Я получил свой ответ от предложения @ Paulie_D о том, чтобы посмотреть на высоту в пределах a и li блоков.

this jsfiddle показывает это в действии!

Удаление Высоты Атрибут, как показано ниже, дает:

li{ 
    /*height:50px; */ 
    position:relative; 
    background: linear-gradient(#292929, #242424); 
} 

a { 
    border-top: 1px solid rgba(255,255,255,0.1); 
    border-bottom: 1px solid black; 
    text-decoration:none; 
    display:block; 
    /*height:100%;*/ 
    width:100%; 
    line-height:50px; 
    color:#bbb; 
    text-transform: uppercase; 
    font-weight: bold; 
    padding-left:25%; 
    border-left:5px solid transparent; 
    letter-spacing:1px; 
    transition: all 0.3s linear; 
}