How to make a vertical menu so that the other menus go down with its expansion?

Question

I want to create a vertical menu like when I click the parent menu the children expand below the parent and it pushes down the other parent menus in html,css and js. Would be grateful! thanks in advance

Answer 1

i think you want to say this DEMO LINK

HTML

<div id="SlideMenu1">
<ul>
   <li class="SlideMenu1_Folder"><div><a>FOLDER 1</a></div><span><!-- empty --></span>
      <ul style="display:none">
         <li><a href="">Item 1</a></li>
         <li><a href="">Item 2</a></li>
      </ul>
   </li>
   <li class="SlideMenu1_Folder"><div><a>FOLDER 2</a></div><span><!-- empty --></span>
      <ul style="display:none">
         <li><a href="">Item 3</a></li>
         <li><a href="">Item 4</a></li>
      </ul>
   </li>
   <li class="SlideMenu1_Folder"><div><a> FOLDER3</a></div><span><!-- empty --></span>
      <ul style="display:none">
         <li><a href="">Item1</a></li>
      </ul>
   </li>
</ul>
</div>

The Css

#SlideMenu1 ul
{
   list-style: none;
   margin: 0;
   padding: 0;
   font-family: Arial;
   font-size: 13px;
}
#SlideMenu1 li
{
   cursor: pointer;
}
#SlideMenu1 li div
{
   margin: 0px 0px 0px 0px;
   padding: 2px 2px 2px 5px;
   background-color: #A0A0A0;
   border-style: solid;
   border-width: 1px;
   border-color: #A0A0A0;
   position: relative;
   left: 0;
   top: 0;
   width: 95px;
}
#SlideMenu1 li div:hover
{
   background-color: #666666;
   border-style: solid;
   border-width: 1px;
   border-color: #666666;
}
#SlideMenu1 li a
{
   color: #EEEEEE;
   font-weight: normal;
   text-decoration: none;
}
#SlideMenu1 li a:hover
{
   color: #EEEEEE;
   font-weight: normal;
   text-decoration: none;
}
#SlideMenu1 li li
{
   cursor: auto;
   padding: 2px 2px 2px 5px;
   margin: 1px 0px 1px 0px;
   background-color: #EEEEEE;
   border-style: solid;
   border-width: 1px;
   border-color: #C0C0C0;
}
#SlideMenu1 li li a
{
   color: #666666;
   font-weight: normal;
   text-decoration: none;
}
#SlideMenu1 li li:hover
{
   background-color: #C0C0C0;
   border-style: solid;
   border-width: 1px;
   border-color: #C0C0C0;
}
#SlideMenu1 li li a:hover
{
   color: #666666;
   font-weight: normal;
   text-decoration: none;
}
#SlideMenu1
{
   position: absolute;
   left: 0px;
   top: 0px;
   width: 104px;
   height: 186px;
   z-index: 0;
}

The Java Script

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
   $(".SlideMenu1_Folder div").click(function()
   {
      if ($(this).parent().find('ul').is(':hidden'))
      {
         $(this).parent().find('ul').show();
      }
      else
      {
         $(this).parent().find('ul').hide();
      }
   });
});
</script>