Here are two options I came up with. The first uses embedded/nested ordered lists <ol>, the second uses divs <div>. There are some limitations and benefits to each.
However, not all ePub devices/reading apps treat ordered lists like they should and you may run across some that'll make your display ugly. If you use the <div> then you can type in exactly what you want to see.
I second Kevin's aversion to using empty <p> or <br> tags just to create space...that is what your css styling is for.
Ordered List:
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.lvl1 {list-style-type: decimal}
.lvl2 {list-style-type: lower-alpha}
.lvl3 {list-style-type: lower-roman}
.lvl1 li {margin-top:1.5em}
.lvl2 li {margin-top:.5em}
.lvl3 li {margin-top:.5em}
</style>
</head>
<body>
<ol class="lvl1">
<li>Fruits
<ol class="lvl2">
<li>apple</li>
<li>mango</li>
<li>grapes</li>
</ol>
</li>
<li>Vegetables
<ol class="lvl2">
<li>tomato</li>
<li>pumpkin</li>
<li>broccoli
<ol class="lvl3">
<li>prevents cancer</li>
<li>good for digestion</li>
<li>prevents cancer</li>
</ol>
</li>
</ol>
</li>
<li>Fast Food
<ol class="lvl2">
<li>burger</li>
<li>chips</li>
<li>rolls</li>
</ol>
</li>
</ol>
</body>
</html>
Div:
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p {margin:0}
div.lvl1 {margin:1em}
div.lvl2 {margin:.5em 1em}
div.lvl3 {margin:.5em 1em}
</style>
</head>
<body>
<div class="lvl1">
<p>1. Fruits</p>
<div class="lvl2">
<p>a) apple</p>
<p>b) mango</p>
<p>c) grapes</p>
</div>
<p>2. Vegetables</p>
<div class="lvl2">
<p>a) tomato</p>
<p>b) pumpkin</p>
<p>c) broccoli</p>
<div class="lvl3">
<p>i) prevents cancer</p>
<p>ii) good for digestion</p>
<p>iii) prevents cancer</p>
</div>
</div>
<p>3. Fast Food</p>
<div class="lvl2">
<p>a) burger</p>
<p>b) chips</p>
<p>c) rolls</p>
</div>
</div>
</body>
</html>