title: use li element as a button
body: <p>I have ul elements like below in my html </p>
  
  <pre><code>&lt;ul class="nav" id="loadCategories"&gt;
    &lt;li class="sub-menu"&gt;&lt;a href="#"&gt;Search by category&lt;/a&gt;
      &lt;ul class=""&gt;
        &lt;li&gt;&lt;a href="#"&gt;Food&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sports&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Personal&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  
    &lt;li class="sub-menu"&gt;&lt;a href="#"&gt;Search by city&lt;/a&gt;
       &lt;ul class=""&gt;
         &lt;li&gt;&lt;a href="#"&gt;Mumbai&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Bangalore&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Personal&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/li&gt;            
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>Now I want to use a button just below this <code>ul</code>. But when I put something like the code below it breaks.</p>
  
  <pre><code> &lt;input type="button" class="signout_btn" value="Sign Out" id="btnSignOut"&gt;Signout&lt;/input&gt;
  </code></pre>
  
  <p>So is there any way I can put my button as a <code>li</code> element in order to get the exact same look(CSS).</p>
  
  <p>Here's the <a href="https://jsfiddle.net/bzdqtmkq/" rel="nofollow noreferrer">fiddle</a> for the same. The button should look like the <code>ul</code> element</p>