submenus of the topnav menu not indented

My site has several pages, organized in a tree structure. The sub-menus of the top items are not indented, so for children of items beyond the first item, it can be hard or impossible to move the mouse over the children. I’ve worked around this by adding the following to the style.css, but this is dependent on manually choosing suitable offsets.
#topnav li:first-child + li .children { margin-left: 100px; }
#topnav li:first-child + li .children .children { margin-left: 0px; }
#topnav li:first-child + li + li .children { margin-left: 170px; }
#topnav li:first-child + li + li .children .children { margin-left: 0px; }
#topnav li:first-child + li + li + li .children { margin-left: 280px; }
#topnav li:first-child + li + li + li .children .children { margin-left: 0px; }
#topnav li:first-child + li + li + li + li .children { margin-left: 400px; }
#topnav li:first-child + li + li + li + li .children .children { margin-left: 0px; }
#topnav li:first-child + li + li + li + li + li .children { margin-left: 470px; }
#topnav li:first-child + li + li + li + li + li .children .children { margin-left: 0px; }
#topnav li:first-child + li + li + li + li + li + li .children { margin-left: 600px; }
#topnav li:first-child + li + li + li + li + li + li .children .children { margin-left: 0px; }