fade effect in drop down menu

Question

http://jsfiddle.net/frcdd/11/

See fiddle.

Question: When a menu item is clicked, say "canada", the menu drops down and I have placed a background on the now visible part. I am using a fade in effect as well. However, my background is a grey and the menu fades from white.

I am wondering if someone can look at the script and see how to change the fade from white, to fade in/out from black.

check the fiddle, it will make more sense what I am after.

div.container {
    background:#292B29;
    padding-top:0px;
    margin-top: 0px;
    padding-bottom:0px;
    padding-top:0px;
}

Answer 1

It's fading in the sub menu, so just make the background of the container, #content, black

#content {
    float:left;
    margin:0px;
    background:black;
}

Demo

Answer 2

You have a mistake in your code.

Your code

<div id="content">
    <div class="collapsible" id="nav-section1">Canada<span></span>

    </div>
    <div class="container">
        <ul>

Should be

 <div id="content">
    <div class="container">
        <div class="collapsible" id="nav-section1">Canada<span></span>

        </div>
        <div>
             <ul>