CSS doesn't inheritance problem - css

Question

Well, I'm working an an ul - li multilevel menu and have problem.
Firstly, some code (I know it's not perfect but the crappy div is automatically added by Wordpress):
<nav id="page-navigation">
<div class="menu-menu-container">
<ul id="menu-menu" class="menu">
<li>Home</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Pages
<ul class="sub-menu">
<li>One Column</li>
<li>Two Columns</li>
<li>Three Columns</li>
</ul>
</li>
</ul>
</div>
In my stylesheet I'll be pointing only to page-navigation id & sub-menu class so you can totally skip other ids/classes.
The problem is I can't change WIDTH of links in sub-menu. I don't know how. I'm totally lost.
As far as I can see this code overwrites them:
#page-navigation ul li {
float: left;
padding: 0;
font-size: 1.2em;
line-height: 1.2em;
background-repeat: no-repeat;
width: 200px;
height: 65px;
}
#page-navigation ul li a {
display: inline-block;
text-align: center;
padding: 10px 0 0 0;
text-shadow: #222 1px 1px 1px;
width: 200px;
height: 65px;
}
And here's the code for sub-menu items:
.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 :) */
}
I know the whole sub-menu is inside of a <li>, but can do nothing with that (default Wordpress behavior).
What now? :(
Thaanks

Answer 1

You need to specify the full path, the higher level items are currently more specific. Try this:
#page-navigation ul li .sub-menu li {
width: 100px;
}

Answer 2

Your .sub-menu width, the first of your "doesn't work" actually does work for me. For the second, you can do two things.
Make it width: 500px !important so it overrides anyway. But I would advise to instead...
Put the ID at the beginning of the selector. .sub-menu li is overridden by any selector with an ID in it. So change it to #page-navigation .sub-menu li.

Answer 3

The selector #page-navigation ul li is more specific than .sub-menu li, so it takes precedence.
You can either work this out by adding an !important annotation to your CSS rules like this:
.sub-menu li {
width: 500px !important;
}
or specify the rule as more specific:
#page-navigation ul.sub-menu li {
width: 500px;
}
For problems like this, please resort to Firebug - you'll have a nice view of what is overwritten by what. This helps a lot :)