Question

我有一个页面布局工作正常，这是我不想搞砸的（除非我必须）。我不擅长使用JavaScript，所以我在网上找到了一个例子。我得到的问题是，当使用我的手风琴菜单时，子菜单向右偏移。我在html本身使用了一些内联CSS，并使用!important命令覆盖列表元素上的自动填充。这似乎没有任何影响。 JS小提琴here。那里有大量自动生成的注释代码，所以它会变得凌乱，我只是需要它来展示手风琴子菜单的样子。为什么内联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;

}

知道可能是什么让子菜单保持正确对齐？

Answer 1

您使用过：

padding: none !important;

而不是

padding: 0 !important;

Answer 2

尝试更改padding: none;的{{1}}。

覆盖jquery菜单的外部CSS规则

2 个答案: