Separated elements overlooked, now combined
<p>Currently in the process of learning MVC and I think it's interfering with HTML code. I have just a basic navigational menu as a list and two <code>&lt;li&gt;</code> items seem to combine into one. Any way to make sure the two are separated when live?</p>

<pre><code>@if ((Request.Url.AbsolutePath.ToString().ToLower() != "/home/index") &amp;&amp; (Request.Url.AbsolutePath.ToString() != "/"))
{
    &lt;nav data-spy="affix" data-offset-top="500" style="border-radius:0px; left: 0" ng-hide="sideBar" id="nav"&gt;
        &lt;img src="~/Content/images/open.png" ng-model="sideBar" id="sideBarOpen" style="left:0px; top:0;"/&gt;
        &lt;div id="sideBar" style="left: -200px"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="@Url.Action("Index", "Home")" id="navHeader"&gt; Home &lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;br /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="@Url.Action("AboutMe", "Home")" id=""&gt;About Me&lt;/a&gt;&lt;/li&gt;
#############
                &lt;li&gt;&lt;a href="@Url.Action("Experience", "Home")" id="&gt;Experience&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="@Url.Action("Resume", "Home")" id=""&gt;Resume&lt;/a&gt;&lt;/li&gt;

############ These two seem to be recognized as 1 &lt;li&gt; and not two.

                &lt;li&gt;&lt;a href="@Url.Action("Contact", "Home")" id=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;img src="/Content/images/myPic.jpg" /&gt;
                &lt;/div&gt;
    &lt;/nav&gt;
    &lt;div id="sideBarBack" style="width:0%;"&gt;
    &lt;/div&gt;
}
</code></pre>