排列在CSS下拉元素

Question

我該如何排列我的下拉元素與點擊器？

這裏是我的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; 
}