title: Html help -- nested ULs and LIs
body: <p>I want to achieve something like this:</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#"&gt;Item1&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Item2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a href="#"&gt;Item3&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;
                                          &lt;a href="#"&gt;Item4&lt;/a&gt;
                                          &lt;ul&gt;
                                              &lt;li&gt;
                                                  &lt;a href="#"&gt;Item5&lt;/a&gt;
                                                  &lt;ul&gt;
                                                      &lt;li&gt;
                                                          &lt;a href="#"&gt;Item6&lt;/a&gt;
                                                          &lt;ul&gt;
                                                              &lt;li&gt; &lt;a href="#"&gt;Item7&lt;/a&gt; &lt;/li&gt;
                                                          &lt;/ul&gt;
                                                      &lt;/li&gt;
                                                  &lt;/ul&gt;
                                              &lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt; &lt;a href="#"&gt;Item8&lt;/a&gt; &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>    @foreach (var stp in Model.stepData)
  {
          &lt;li&gt;&lt;a href="#"&gt;@stp.Key&lt;/a&gt;&lt;/li&gt;
          &lt;ul&gt;
              @for (int i = 0; i &lt; stp.Value.Count; i++)
      {
          &lt;li&gt;&lt;a href="#"&gt;@stp.Value[i]&lt;/a&gt;&lt;/li&gt;
  
  }
          &lt;/ul&gt;
  }
  </code></pre>
  
  <p>I know I want to add &lt; ul > before the &lt; 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:</p>
  
  <pre><code>@for (int i = 0; i &lt; stp.Value.Count; i++)
      {
          &lt;ul&gt;&lt;li&gt;&lt;a href="#"&gt;@stp.Value[i]&lt;/a&gt;&lt;/li&gt;
  
  }
  @for(int i = 0; i&lt;stp.Value.Count;i++){&lt;/ul&gt;}
  </code></pre>
  
  <p>TIA for your help.</p>
  
  <p>
  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.</p>
  
  <p>The target framework is .Net Core 2.0; MVC 5</p>