Двухуровневое выпадающее меню

Стили определил так

Код (CODE):

1. .topmenu {
2.     float: left;
3.     width: 900px;
4. }
5.  
6. .topmenu ul, li {
7.     margin: 0px;
8.     padding: 0px;
9. }
10. .topmenu ul li {
11.     display: inline;
12.     list-style-type: none;
13. }
14. .topmenu a {
15.     font-weight: 700;
16.     color: #FFFFFF;
17.     text-decoration: none;
18.     text-transform: uppercase;
19. }
20. .topmenu ul li ul {
21.     display: none;
22.     position: relative;
23.     background-color: #f3e7e8;
24.     border: 2px solid #999999;
25.     width: 130px;
26.     left: 0px;
27. }
28. .topmenu ul li:hover ul {
29.     display: inline-block;
30. }
31. .topmenu ul li:hover ul li a {
32.     color: #bb2151;
33.     text-decoration: none;
34.     font-weight: normal;
35.     text-transform: capitalize;
36. }
37. .topmenu ul li:hover ul li:hover {
38.     text-decoration: none;
39.     background-color: #db818a;
40. }\

Но во-первых выпадают только подпункты активного пункта меню, во-вторых пункты меню, идущие за тем, над которым находжится курсор мыши, выводятся ниже подпунктов, а не справа, в-третьих подпункты выводятся левеек родительского пункта с выравниванием по центру, а не по левому краю как должно быть. В чем дело?