Выравнивание элементов на CSS dropdown

Question

Как бы выстроить мои выпадающие элементы с помощью clicker?

Вот мой CSS код

#header_dropdown { 
    float: right; 
} 
.click-nav { 
    width: 200px; 
} 
.click-nav ul { 
    position: relative; 
} 
.click-nav ul li { 
    position: relative; 
    list-style: none; 
    cursor: pointer; 
} 
.click-nav ul li ul { 
    position: absolute; 
} 
.click-nav ul .clicker { 
    position: relative; 
    background: #2284B5; 
    color: #FFF; 
} 
.click-nav ul .clicker:hover, .click-nav ul .active { 
    background: #196F9A; 
} 
.click-nav ul li a { 
    transition: background-color 0.2s ease-in-out; 
    -webkit-transition: background-color 0.2s ease-in-out; 
    -moz-transition: background-color 0.2s ease-in-out; 
    display: block; 
    background: #FFF; 
    color: #333; 
    text-decoration: none; 
} 
.click-nav ul li a:hover { 
    background: #F2F2F2; 
} 
/* Fallbacks */ 
.click-nav .no-js ul { 
    display: none; 
} 
.click-nav .no-js:hover ul { 
    display: block; 
} 

Jsfiddle на http://jsfiddle.net/KVrFM/

Answer 1

Вы должны удалить прокладку из подменю ul.

http://jsfiddle.net/KVrFM/1/

Я изменил вашу анонимную функцию, чтобы добавить активный класс к li, а не тегу привязки с помощью JQuery parent().

$('.clicker').parent().toggleClass('active'); 

Затем я добавил следующее правило CSS. При создании выпадающих меню и выпадающих меню в CSS полезно использовать дочерний комбинатор >. Наличие правила, такого как .click-nav ul, будет нацелено на ul, которые являются потомками .click-nav. Изменение этого правила к .click-nav > ul будет нацелен только ul S, которые являются детьми из .click-nav и не внуков и т.д.

.active ul { 
    padding: 0; 
}