vertical accordion menu overflow issue

Question

I have used the vertical accordion menu from this site

http://www.designchemical.com/lab/jquery-vertical-accordion-menu-plugin/getting-started/

The sub menus getting overflow while page loads. The internal script that i have used is

<script type="text/javascript">
$(document).ready(function($){
    $('#accordion-3').dcAccordion({
        eventType: 'click',
        autoClose: false,
        saveState: false,
        disableLink: false,
        showCount: false,
        active:false, 
        collapsible:true,
        speed: 'slow'
    });
});
</script>

I tried this style in my stylesheet

.blue .accordion li {overflow: hidden; position:relative;}

This is my html code

<div class="blue demo-container">
    <ul class="accordion"  id="accordion-3">
        <li ><a  href="#">Manage Webpage</a>
            <ul>
                <li ><a href="/admin/create">Create Webpage</a></li>
                <li ><a href="/admin/view">View Webpage</a></li>
            </ul>
        </li>
        <li class="active"><a href="/admin/content">Manage Menu</a></li>
        <li ><a href="/admin/event">Manage Event</a></li>
        <li ><a href="/admin/category">Add Category</a></li>
    </ul>
</div>

But nothing could fix this issue. How can i fix this overflow on page load issue?

Answer 1

Add the following to the style sheet:

.blue .accordion ul {display: none;}