Why doesn’t this CSS selector work (selecting sub-menu in WordPress)

I am trying to select the sub-menu item from a WordPress default sidebar menu, and I am trying to write a CSS selector for that. I thought I understand CSS selectors, but I don’t know what is happening in this case.

The following ones are working:

.widget_nav_menu ul .menu-item .sub-menu { background: red; }
.widget_nav_menu ul .menu-item li { background: red; }

While this one doesn’t work:

.widget_nav_menu ul .menu-item li .sub-menu { background: red; }

Can someone explain to me why can I not specify things to be more precise with both specifying class and type here?

Luckily at this level of customization I don’t need to select things more precisely (I only want to hide sub-menu items), but can someone tell me how to make the non-working example work?

Here is a live site, but it’s the same on all WordPress installs with TwentyTen theme and a multi-level menu on the left.

UPDATE: I think I got a big misunderstanding about the usage of spaces in CSS, so I asked a question here: usage of spaces in CSS files

BTW, after understanding the answers and realising what was wrong with my problem, the correct answer for my problem is:

.widget_nav_menu li.menu-item ul.sub-menu