The problem below with the nested accordion is that if a question is large enough, the answer does not push other questions down when it is expanded, it overlaps it. What is the problem?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").accordion({ collapsible: true, active: false });
        $("#general-questions").accordion({ collapsible: true, active: false });
    });
</script>

<h2>Frequently Asked Questions</h2>

<div id="accordion">
    <h3>
        <a href="#">General</a></h3>
    <div id="general-questions">
        <h3>
            <a href="#">Question 1</a></h3>
        <div>
            Answer 1</div>
        <h3>
            <a href="#">Question 2</a></h3>
        <div>
            Answer 2</div>
        <h3>
            <a href="#">Question 3</a></h3>
        <div>
          Answer 3</div>
</div>
</div>