CSS没有'；t遗传问题

嗯，我正在使用ul-li多级菜单，但遇到了问题

首先，一些代码（我知道它并不完美，但Wordpress会自动添加糟糕的div）：

下面是子菜单项的代码：

.sub-menu {
    border-radius: 5px;
    border: solid 1px #000;
    box-shadow: 0px 0px 25px #000;
    background-color: #222;
    height: 200px;
    width: 500px; /* THIS LINE DOESN'T WORK */
}

.sub-menu li {
    width: 500px; /* THIS LINE ALSO DOESN'T WORK ! */
}

.sub-menu li a {
    font: 10px Verdana;
    tex-shadow: 1px 1px 0px #000;
    width: 100px; /* doesn't work :) */
    height: 100px; /* doesn't work :) */
}

我知道整个子菜单都在

中，但对此无能为力（默认的Wordpress行为）

现在怎么办(

---

Thanks

您需要指定完整路径，更高级别的项目当前更具体。请尝试以下操作：

#page-navigation ul li .sub-menu li {   
  width: 100px;
}

---

你的.sub菜单宽度，你的第一个“不工作”实际上对我有用。对于第二个，你可以做两件事

把它设为宽度：500px！重要的，这样它无论如何都会覆盖。但我建议改为

将ID放在选择器的开头。

。子菜单li

被任何带有ID的选择器覆盖。因此将其更改为

#页面导航。子菜单li

选择器

#页面导航ul li

比

子菜单li

更具体，因此优先

您可以通过向CSS规则添加

！important

注释来解决此问题，如下所示：

.sub-menu li {
    width: 500px !important;
}

或指定更具体的规则：

#page-navigation ul.sub-menu li {
    width: 500px;
}

对于此类问题，请求助于Firebug-您可以很好地了解哪些内容被哪些内容覆盖。这非常有帮助：）

.sub-menu li {
    width: 500px !important;
}

#page-navigation ul.sub-menu li {
    width: 500px;
}