title: Html css needs to be changed to look like the image posted (Implemented in dotnet core application)
body: <p>The submenus are displayed as shown in the capture1 based on the html and css where chevrons are not aligned.But it should be aligned as per the capture2.</p>
  
  <p><strong>Capture 1:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/BTJqr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BTJqr.png" alt="enter image description here"></a></p>
  
  <p><strong>Capture 2:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/gwzDC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gwzDC.png" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="submenu" class="submenu-manure-wizard" style="background-color:#f2f2f2"&gt;
      &lt;ul class="submenu-manure-wrapper submenu-manure-wizard-list clearfix"&gt;
          @foreach (var item in Model.subMenuOptions)
          {
              if (@item.MainMenuId == 2)
              {
                  &lt;li id="@item.Controller@item.Action@item.Id" class="submenu-manure-wizard-item" style="display:none"&gt;
                      &lt;a id="eMenu" href='@Url.Action(@item.Action, @item.Controller)'&gt;
                          &lt;span class="wizard-name" style="vertical-align: text-top"&gt;@item.Name&lt;/span&gt;
  
                          &lt;div style="width: 30px;height:19px;display:block"&gt;
                              &lt;svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 199" style="enable-background:new 0 0 200 199;" xml:space="preserve"&gt;&lt;style type="text/css"&gt;
                                                                                                                                                                                                                                                  .st0 {
                                                                                                                                                                                                                                                      fill: none;
                                                                                                                                                                                                                                                      stroke: #000000;
                                                                                                                                                                                                                                                      stroke-width: 11;
                                                                                                                                                                                                                                                      stroke-miterlimit: 5;
                                                                                                                                                                                                                                                  }
  &lt;/style&gt;&lt;polyline class="st0" points="33.5,-0.5 136,102 36.5,201.5 " /&gt;&lt;/svg&gt;
                          &lt;/div&gt;
  
                      &lt;/a&gt;
  
                  &lt;/li&gt;
  
              }
          }
      &lt;/ul&gt;
  
      &lt;ul class="submenu-fields-wrapper submenu-manure-wizard-list clearfix"&gt;
          @foreach (var item in Model.subMenuOptions)
          {
              if (@item.MainMenuId == 3)
              {
                  &lt;li id="@item.Controller@item.Action@item.Id" class="submenu-fields-wizard-item" style="display:none"&gt;
                      &lt;a id="eMenu" href='@Url.Action(@item.Action, @item.Controller)'&gt;
                          &lt;span class="wizard-name" style="vertical-align: text-top"&gt;@item.Name&lt;/span&gt;
                          @if (!(@item.Id == 5))
                          {
                              &lt;div class="wizard-item" style="width: 30px;height:19px;display:block"&gt;
                                  &lt;svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 199" style="enable-background:new 0 0 200 199;" xml:space="preserve"&gt;&lt;style type="text/css"&gt;
                                                                                                                                                                                                                                                      .st0 {
                                                                                                                                                                                                                                                          fill: none;
                                                                                                                                                                                                                                                          stroke: #000000;
                                                                                                                                                                                                                                                          stroke-width: 11;
                                                                                                                                                                                                                                                          stroke-miterlimit: 5;
                                                                                                                                                                                                                                                      }
  &lt;/style&gt;&lt;polyline class="st0" points="33.5,-0.5 136,102 36.5,201.5 "/&gt;&lt;/svg&gt;
                              &lt;/div&gt;
                          }
                      &lt;/a&gt;
                  &lt;/li&gt;
              }
          }
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wizardsubmenu {
      padding: 0px 0;
      border-bottom: 1px solid #b0cee2;
  }
  
  #submenu-manure-width {
      width: 20%;
  }
  
  .submenu-manure-wrapper {
      max-width: 1210px;
      max-height: 20px;
      margin: 0 auto;
      padding: 0 150px;
      padding-left: 150px;
  }
  
  .submenu-fields-wrapper {
      max-width: 930px;
      margin: 0 auto;
      padding: 0 15px;
  }
  
  .submenu-manure-wizard {
      /*padding: 5px 0;*/
      border-bottom: 1px solid #b0cee2;
  }
  
  .submenu-manure-wizard-list {
      list-style: none;
      text-align: center;
  }
  
  .submenu-manure-wizard-item {
      float: left;
      width: 25%;
      position: relative;
  }
  
  .submenu-fields-wizard-item {
      float: left;
      width: 50%;
      position: relative;
  }
  </code></pre>
  
  <p>Attached the image ...where submenu items need to be highlighted.SVG images need to aligned to the submenu items.</p>
  
  <p>I have main menu and submenu.The captures show the submenu.Submenus are being loaded from the output of the mainmenu.Am using svg images after the submenu items which is causing the svg pages to float as shown in the image.I have attached the css and html pages i have used .</p>