JSFiddle - React, Tailwind, and code Playground

by skip405

HTML

<div ><button id="showmenu" type="button">Show menu</button></div>
   <div class="sidebarmenu" style="display: none;">
    <ul id="sidebarmenu1">
      <li><a href="#" >Circle List</a>
        <ul>
          <li><a href="addCircle.jsp">Add</a></li>
          <li><a href="EditDiv.jsp">Edit</a></li>
          <li><a href="deletediv.jsp">Delete</a></li>
          <li><a href="adddivision.jsp">View All</a></li>
         </ul>
       </li>
    </ul>       
   </div>

CSS

.sidebarmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
 }

 .sidebarmenu ul li {
position: relative;
 }

.sidebarmenu ul li:hover ul {
    display: block;
}

/* Top level menu links style */
.sidebarmenu ul li a {
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
padding: 6px;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-right: 1px solid #bbb;
}

.sidebarmenu ul li a:link,.sidebarmenu ul li a:visited,.sidebarmenu ul li a:active
{
background-color: #d2d2d2 /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited {
color: black;
}

.sidebarmenu ul li a:hover {
background-color: #e8e8e8;
}

/*Sub level menu items */
.sidebarmenu ul li ul {
position: absolute;
width: 89px; /*Sub Menu Items width */
left: 100%;
top: 0;
    display: none;
}

.sidebarmenu a.subfolderstyle{
  background: url(../images/right.PNG) no-repeat 97% 50%;
}

/* Holly Hack for IE \*/
* html .sidebarmenu ul li {
float: left;
height: 1%;
}

* html .sidebarmenu ul li a {
height: 1%;
}

JavaScript

$('#showmenu').click(function() {
    $('#showmenu').text($('.sidebarmenu').is(':visible') ? 'Show Menu' : 'Hide Menu');
    $('.sidebarmenu').toggle("slide");
});