Accordion menu not expanding parent container when menu is expanded

Question

When I open a menu item that is accordion style in the left side navigation, the menu container will not push the height of the parent container. I am not sure why this is the case. I would like to create the effect that when the side-bar height increases, so does the parent container's. How can I accomplish this? Thanks for any help.

EDIT: I can post the CSS specific to the menu, but it is fairly long. Let me know if it is needed.

HTML:

        <div class="content-container">
            <div id="side-nav-container">
                <div id='cssmenu'>
                    <ul>
                       <li><a href='/index'><span>Home</span></a></li>
                       <li><a href='#'><span>Landscaping</span></a>
                          <ul>
                             <li><a href='#'><span>Planters</span></a></li>
                             <li><a href='#'><span>Walls</span></a></li>
                             <li><a href='#'><span>Stone Work</span></a></li>
                             <li><a href='#'><span>Walkways</span></a></li>
                             <li><a href='#'><span>Stairways</span></a></li>
                             <li><a href='#'><span>Steps</span></a></li>
                             <li><a href='#'><span>Water Falls</span></a></li>
                             <li><a href='#'><span>Ponds</span></a></li>
                             <li><a href='#'><span>Creek Beds</span></a></li>
                             <li><a href='#'><span>Pondless Water Features</span></a></li>
                             <li><a href='#'><span>Enhancement Lighting</span></a></li>
                             <li><a href='#'><span>Patios</span></a></li>
                             <li><a href='#'><span>Fireplaces</span></a></li>
                          </ul>
                       </li>
                       <li><a href='#'><span>Lawn Care</span></a>
                          <ul>
                             <li><a href='#'><span>Mowing</span></a></li>
                             <li><a href='#'><span>Fertilization &amp; Weeding</span></a></li>
                             <li><a href='#'><span>Fall and Spring Cleanup</span></a></li>
                             <li><a href='#'><span>Shrub Trimming</span></a></li>
                          </ul>
                       </li>
                       <li><a href='#'><span>Irrigation</span></a>
                          <ul>
                             <li><a href='#'><span>Installation</span></a></li>
                             <li><a href='#'><span>Design</span></a></li>
                             <li><a href='#'><span>Maintenance</span></a></li>
                          </ul>
                       </li>
                       <li><a href='#'><span>Porous Pave</span></a>
                          <ul>
                             <li><a href='#'><span>Walkways</span></a></li>
                             <li><a href='#'><span>Patios</span></a></li>
                             <li><a href='#'><span>Pools</span></a></li>
                             <li><a href='#'><span>Playgrounds</span></a></li>
                          </ul>
                       </li>
                       <li><a href='#'><span>Demo Dumpsters</span></a></li>
                       <li><a href='#'><span>Outdoor Kitchens</span></a>
                          <ul>
                             <li><a href='#'><span>Italian Pizza Ovens</span></a></li>
                             <li><a href='#'><span>Kitchens</span></a></li>
                             <li><a href='#'><span>BBQs</span></a></li>
                          </ul> 
                       </li>
                       <li><a href='#'><span>Products &amp; Rentals</span></a>
                          <ul>
                             <li><a href='#'><span>Pond Supplies</span></a></li>
                             <li><a href='#'><span>Split fire wood splitters</span></a></li>
                             <li><a href='#'><span>Altoz Precision Mowers</span></a></li>
                          </ul>
                       </li>
                       <li><a href='#'><span>About</span></a></li>
                       <li><a href='#'><span>Contact</span></a></li>
                    </ul>
                </div>
                <div id="contact-info">
                    <p><strong>Phone</strong><br />
                        (218) 759-2376
                    </p>
                    <br />
                    <p><strong>Email</strong><br />
                        <a href="mailto:info@tkoutdoors.com">info@tkoutdoors.com</a>
                    </p>
                </div>
                <img src="/_images/layout/Request-Quote-Btn.jpg" alt="request a quote" />
            </div>
            <div id="content">
                {tag_pagecontent}
            </div>
        </div>

Sass:

div.content-container{
  width: 100%;
  height: auto;
  margin-top: 1em;
  overflow: hidden;
  background-color: #FAF8F0;
  padding: 0.5em;
  position: relative;
  #side-nav-container{
    width: 215px;
    padding: 1em 0.25em;
    float: left;
    background-color: #F2F0CE;
    overflow: hidden;
    position: relative;
    #contact-info{
      padding: 1em 0;
      width: 85%;
      margin: 0 auto;
    }
  }
}

Live Site: http://www.tkoutdoors.com

Answer 1

I see with Firebug that there is an inline stlye height of 856px in #side-nav-container. Remove that and it should work.

EDIT: The height is being set in the last part of your scripts.js.

EDIT2: This is your actual scripts.js:

jQuery(document).ready(function () {
    $("#nav_1487666 li a").mouseover(function () {
        $(this).parent().prev().find("a").css("border-bottom", "none")
    }), $("#nav_1487666 li a").mouseout(function () {
        $(this).parent().prev().find("a").css("border-bottom", "1px solid #790C0E")
    }), $("#cssmenu > ul > li > a").click(function () {
        var a = $(this).next();
        return $("#cssmenu li").removeClass("active"), $(this).closest("li").addClass("active"), a.is("ul") && a.is(":visible") && ($(this).closest("li").removeClass("active"), a.slideUp("normal")), a.is("ul") && !a.is(":visible") && ($("#cssmenu ul ul:visible").slideUp("normal"), a.slideDown("normal")), 0 == $(this).closest("li").find("ul").children().length ? !0 : !1
    }), $(function () {
        var a = $("#content").height(),
            b = $("#side-nav-container").height();
        a > b ? $("#side-nav-container").css("height", a) : $("#content").css("height", b)
    })
});

Take a look at the $("#cssmenu > ul > li > a") click function. You are using slideUp/slideDown to do the accordion effect. Those functions, have a second parameter which executes when the animation is complete. So you need to do something like this:

function menuHeight() {
    $('#side-nav-container').height('auto');
    $('#content').height('auto');
    var a = $("#content").height(),
    b = $("#side-nav-container").height();
    a > b ? $("#side-nav-container").css("height", a) : $("#content").css("height", b);
}

And on every slideUp/Down:

a.slideUp("normal", function() {
    menuHeight();
})

Remove this:

$(function () {
    var a = $("#content").height(),
    b = $("#side-nav-container").height();
    a > b ? $("#side-nav-container").css("height", a) : $("#content").css("height", b)
 })

And replace it with:

menuHeight();

That's all, didn't try it, but it should work.