Slide Down Menu

FORKED: http://jsfiddle.net/uuGxe/2/

HTML

<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>

<body>
   
  <div id="productmenu">
    <div class="submenublock" id="submenu1">
        
        <h3><a href="#">Category 1</a></h3>
        <ul class="second_level">
           <li><a href="page.html">Option 1</a></li>
           <li><a href="page.html">Option 2</a></li>
        </ul>
      </div>
        
      <div class="submenublock" id="submenu2">
      
      <h3><a href="#">Category 2</a></h3>
       
      </div>
        
      <div class="submenublock" id="submenu3"><h3><a href="#">Category 3</a></h3>
           <ul class="second_level">
               <li><a href="page.html">Option 1</a></li>
               <li><a href="page.html">Option 2</a></li>
               <li><a href="page.html">Option 3</a></li>
           </ul>
      </div>
           
     
   </div>
    
</body>

CSS

#sidebar {
   float:left;
   width:220px;
}


#productmenu { width:220px; margin-left: 0px;}

.submenublock{
    
    margin: 0px;
    padding: 0px;
    
}

.submenublock h3{
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    height:30px;
    margin: 0px;
    padding:15px 10px 5px 30px;
    
    border-bottom:#CCC 1px solid;
}

.submenublock h3 a{
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    text-decoration:none;
    color: #000000;
    
}

.submenublock h3 a:hover, .submenublock h3 a:active, .submenublock h3 a:focus
{
color: #00aeef;
}

.second_level{
    list-style-type:none;
    list-style:none;
    margin:0px;
    padding:0px;
    
}

.second_level li{
    list-style-type:none;
    list-style:none;
    display: block;

    
    padding: 10px 0px 0px 0px;
    border-bottom:#CCC 1px dashed;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
     height:30px;
    /* background:url(images/menuarrowright.gif) no-repeat right;*/
}

.second_level li a{
    display: block;
     margin-left:30px;
     text-decoration:none;
     color:#000000;
    
    
}

#productmenu ul li a:hover, #productmenu ul li a:active, #productmenu ul li a:focus
{
color: #00aeef;
}

</style>

JavaScript

$(document).ready(function() {
    $('.second_level').hide();
    $("div.submenublock").each(function(index){
        if($(this).children().length > 1){
           $(this).css("background", "url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png) no-repeat right 15px");

          }
     
    });

    $('div.submenublock > h3').click(function() {
        $(this).next().slideToggle('fast', function() {
            //set arrow depending on whether menu is shown or hidden
            if ($(this).is(':hidden')) {
                $(this).parent().css("background", "url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png)no-repeat right 15px");

            } else {
                $(this).parent().css("background", "url(http://www.logan.ws/images/small_up_arrow_icon.gif) no-repeat right 15px");

            }
            return false;
        });

    });
});