HTML - Ordered List Not Numbering Properly - html

Question

I am trying to use HTML to:
Create 2 Ordered Lists
Within Each of the O.L. nest a Unordered List and add some elements inside
However, my numbering isn't working the way it should, I'm getting, 1. 1. rather than 1. 2. etc.
My code:
<ol>
<li>Fruits</li>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
</ol>
<ol>
<li>Vegetables</li>
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</ol>

Answer 1

Sounds like you actually want 1 ordered list, not 2. If you expect the first one to have the number 1 and and the second one to have the number 2, that's one list. The numbers will reset if you start a new list.
<ol>
<li>Fruits
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</li>
</ol>

Answer 2

Not sure why everyone's answering against the docs, officially, you CANNOT nest <ul> element as a direct child to <ol> element and vice versa, so I've modified the markup accordingly.
Demo
<ol>
<li>
<h2>Fruits</h2>
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
</li>
<li>
<h2>Vegetables</h2>
<ul>
<li>Carrot</li>
</ul>
</li>
</ol>
Here, you can adjust the padding and margin of the unordered lists as required by you but I just gave a general idea of how it should be.
You can also use <p> or any other tag at the place of <h2> but I think <h2> or <h3> should fit well for your case.

Answer 3

You're ending the ordered list after the first line. Don't put the tag in untill the end of the entire ordered list. Example below.
<ol>
<li>Fruits</li>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
<li>Vegetables</li>
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</ol>

Answer 4

Maybe you don't use the list-style-property but the counter-increment-property instead so your HTML stays as it is.
ol {
counter-increment: section;
}
ol > li {
list-style-type: none;
}
ol > li:before {
content: counter(section)". ";
}
<ol>
<li>Fruits</li>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Plum</li>
<li>Watermelon</li>
</ul>
</ol>
<ol>
<li>Vegetables</li>
<ul>
<li>Carrots</li>
<li>Lettuce</li>
<li>Cucumber</li>
<li>Tomato</li>
</ul>
</ol>