You can do it however it will only work in real browsers that properly implement CSS. So mostly anything but IE.

Depending on how you want the numbered, the things you need to know are the following.

CSS properties
counter-reset: counter-name value;
counter-increment: counter-name;
content: counter(counter-name) '.' counter(other-counter);

And to apply the content attribute you use a :before psuedo-selector.

And for an example of how to do the example you gave:

CSS
ul { counter-reset: list1 1 list2 0; list-style-type: none; }
ul li { counter-increment: list1; }
ul li ul { counter-reset: list; }
ul li ul li { counter-increment: list2; }
ul li ul li:before { content: counter(list1) '.' counter(list2) ' '; }
HTML
<ul>
  <li>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </li>
</ul>
Output:
2.1 Item 1
2.2 Item 2
3.3 Item 3
3.4 Item 4

Counters are a beautiful thing. You should see them on a 5 deep definition list for an faq. Its a sight to behold :D