覆蓋jQuery的菜單的外部CSS規則

我有一個頁面佈局，工作正常，這是我不想混亂（除非我必須）。我不擅長javascript，所以我在網上找到了一個例子。我得到的問題是，當使用我的手風琴菜單時，子菜單向右偏移。我在html中使用了一些內聯CSS，並使用!important命令來覆蓋列表元素上的自動填充。這似乎沒有任何影響。 JS小提琴here。在那裏有大量的自動生成的評論代碼，所以它會很混亂，我只是需要所有的代碼來展示手風琴子菜單的樣子。爲什麼不是內聯CSS覆蓋外部CSS文件？ !important爲什麼不是關鍵字工作？覆蓋jQuery的菜單的外部CSS規則

我覺得有一些填充怎麼回事，但 ul { padding: 0; margin: 0; } 是我的外部CSS文件，並填充顯然是設置爲0

這裏是使手風琴工作的CSS。

<style type="text/css"> 
#accordionNav { 
    float: left; 
    width: 560px; 
    list-style:none; 

    padding:none; 
} 
#accordionNav li a { 
    display: block; 
    padding:5px; 
    background: #ccc; 
    border-top: 1px solid #eee; 
    border-bottom: 1px solid #999; 
    text-decoration: none; 
    color: #000; 
    list-style:none; 
    padding:none !important; 

    width: 560px; 
} 
#accordionNav li a:hover, #accordionNav li a.active { 
    background: #999; 
    color: #fff; 
} 
#accordionNav li ul { 
    display: none; 
    list-style:none; 
    padding:none !important; 

} 
#accordionNav li ul li a { 
    padding:0 0 0; 
    background: #ececec; 
    list-style:none; 
    padding:none !important; 

}

任何想法它可能是保持子菜單正確對齊？

來源

2012-10-26 wootscootinboogie