Html help -- nested ULs and LIs - html

Question

I want to achieve something like this:
<li>Item1
<ul>
<li>Item2</li>
<li>
Item3
<ul>
<li>
Item4
<ul>
<li>
Item5
<ul>
<li>
Item6
<ul>
<li> Item7 </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> Item8 </li>
</ul>
</li>
Item 1 etc are pulled from a dictionary which can change based on user input. Below is what I tried with my MVC app in the view:
#foreach (var stp in Model.stepData)
{
<li>#stp.Key</li>
<ul>
#for (int i = 0; i < stp.Value.Count; i++)
{
<li>#stp.Value[i]</li>
}
</ul>
}
I know I want to add < ul > before the < li > in the #stp.Value loop.. but that needs to be open.. the closing tags need to be after the last one in that iteration is written. So I thought that maybe another for loop to enter the tag.. but that doesn't work at all. Is it possible for me to achieve this in html?
code of what I tried:
#for (int i = 0; i < stp.Value.Count; i++)
{
<ul><li>#stp.Value[i]</li>
}
#for(int i = 0; i<stp.Value.Count;i++){</ul>}
TIA for your help.
Tried the answer below but got it was unable to find the listItems in the current context within the loop and it also complained of too many characters in the character literal when #for was used.
The target framework is .Net Core 2.0; MVC 5

Answer 1

This should loop through stp.Value and returned each item wrapped in li tags rendered within your parent ul tag:
<ul id="myList">
// stp.Value items here
</ul>
<script>
var list = docment.getElementById('myList');
var listItem = '';
#for (int i = 0; i < stp.Value.Count; i++){
listItem += '<li>' + #stp.Value[i] + '</li>'
}
list.innerHTML = listItem;
</script>
Most MVC frameworks have their own approach to this but since you didn't specify which framework you are using, the above is a general approach to it using vanilla JS.

Answer 2

Made slight modification to the answer above so that it works with razor loop
:
`
<script>
var list = document.getElementById('valueList');
var listItem = '';
var count = 0;
#for (int i = 0; i<stp.Value.Count; i++) {
<text>
listItem += '<ul><li>' + '#stp.Value[i]' + ''
count = i;
</text>
}
for (var i = 0; i <=count; i++) {
listItem += '</li></ul>'
}
list.innerHTML = listItem;
</script>
`