How to make an <ul> act as an <ol> (with numbers instead of bullets)?

This is an unfortunate question, but I don't see any other way around it.

Basically, I am using Kendo UI panelbar to create expandable lists. The problem is, when you use an <ol> as the sublist, the panelbar functionality doesn't work.

Example in Fiddle: http://jsfiddle.net/b3y62uzr/2/

HTML:

<ul id="panelBar1">
    <li>
        Item 1
            <ul>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
            </ul>
    </li>
    <li>Item 2
            <ol>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
            </ol>
    </li>
</ul>

You can see that the first item can be expanded/collapsed properly, but the second item is always open and can't be interacted with.

In my application, I need the sub-list in my expanded section to be numbered rather than bulleted. (I modified the Kendo Panelbar styling to show the bullets).

So the question is: Is it possible to make an <ul> use numbers instead of bullets?

Edit: Use this Fiddle if you want for your answer: https://jsfiddle.net/1h2kLqu4/1/

Yes it is, you can use the list-style-type CSS property on the unordered lists.

You would target it like this:

ul li{
    list-style-type: decimal;
}

Here is a fiddle showing you the result.