use li element as a button

Question

I have ul elements like below in my html

<ul class="nav" id="loadCategories">
  <li class="sub-menu"><a href="#">Search by category</a>
    <ul class="">
      <li><a href="#">Food</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Personal</a></li>
    </ul>
  </li>

  <li class="sub-menu"><a href="#">Search by city</a>
     <ul class="">
       <li><a href="#">Mumbai</a></li>
       <li><a href="#">Bangalore</a></li>
       <li><a href="#">Personal</a></li>
     </ul>
    </li>            

</ul>

Now I want to use a button just below this ul. But when I put something like the code below it breaks.

 <input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">Signout</input>

So is there any way I can put my button as a li element in order to get the exact same look(CSS).

Here's the fiddle for the same. The button should look like the ul element

Answer 1

Here is the code just add a button in a "li" element and remove bullet.

<ul class="nav" id="loadCategories">
   <li class="sub-menu">
      <a href="#">Search by category</a>
      <ul class="">
          <li><a href="#">Food</a></li>
          <li><a href="#">Sports</a></li>
          <li><a href="#">Personal</a></li>
     </ul>
   </li>
   <li class="sub-menu">
         <a href="#">Search by city</a>
         <ul class="">
             <li><a href="#">Mumbai</a></li>
             <li><a href="#">Bangalore</a></li>
             <li><a href="#">Personal</a></li>
         </ul>
    </li>
   <li class="no-bullet">
       <button type="button" class="signout_btn" id="btnSignOut">Sign Out</button>
   </li>
</ul>

Also make the list-style-type to none

.no-bullet{
   list-style-type: none
 }

Here is a fiddle check it out.Hope it helps!! link

Answer 2

Did you try width=100% and height=100% with set parameters for the list?