私は問題なく動作するページ レイアウトを持っています。私はjavascriptに慣れていないので、オンラインで例を見つけました。私が得ている問題は、アコーディオン メニューを使用すると、サブメニューが右にオフセットされることです。HTML自体にインラインCSSを使用し、!importantコマンドを使用して、リスト要素にある自動パディングをオーバーライドしました。これでは効果がないようです。ここでJSフィドル。そこには自動生成されたコメント付きのコードがたくさんあるので、面倒です。アコーディオンのサブメニューがどのように見えるかの例を示すために、すべてのコードが必要でした。インライン CSS が外部 CSS ファイルをオーバーライドしないのはなぜですか? !importantキーワードが機能しないのはなぜですか?
パディングが行われていると思っていました
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;
}
サブメニューが適切に配置されていない原因は何ですか?