use li element as a button - html

Question

I have ul elements like below in my html
<ul class="nav" id="loadCategories">
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</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">
Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">
Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</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?

Answer 3

you can try this
<ul class="nav" id="loadCategories">
<li><input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">Signout</li>
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
</ul>

Answer 4

<input> elements are empty (you shouldn't use end tags). I prefer to use <button> elements:
<button class="signout_btn" id="btnSignOut">Sign Out</button>

Answer 5

Could you please check with this code?
<ul class="nav" id="loadCategories">
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">
<button class="signout_btn" id="btnSignOut" style="background: none;border:none;color: #fff;margin-left: 20px;">Sign Out</button>
</li>
</ul>
The output will be:

Answer 6

Please try below code snippet..
<ul class="nav" id="loadCategories">
<li class="sub-menu">Search by category
<ul class="">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu">Search by city
<ul class="">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<input type="button" class="signout_btn" value="Sign Out" id="btnSignOut">
</ul>
CSS:
.signout_btn{
text-transform: uppercase;
outline: none;
border: 0;
background-color: #673a9a;
line-height: 40px;
color: #fff; display: inline-block;
font-size: 16px;
margin: 10px;
cursor: pointer;
}
JAVASCRIPT:
$( ".menu" ).click(function() {
$('.slide-menu').addClass('active');
$('.slide-wrapper').addClass('active');
});
$( "li.sub-menu" ).click(function() {
$(this).toggleClass('act');
$(this).find('ul').slideToggle();
});