0 down vote favorite


I am working on a menu bar. The sub menu opens upward. I want the following changes

1. On hover main navigation bar should move down and sub link bar should be visible upwards.
2. The sub menu bar should hide if mouse out of main navigation and main navigation should again move upwards.
3. The sub link bar should hide on page scroll and main navigation should be upward.

The link for fiddle

http://jsfiddle.net/xCuLq/


html code is

Code:
<div class="nav">
    <div class="table">

        <ul class="select"><li><a href="#nogo"><b>Home</b>
                </a></li></ul>



        <ul class="select"><li><a href="#nogo"><b>Joseph Turner</b><!--[if IE 7]><!-->           </a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="select_sub">
                    <ul class="sub">
                        <li><a href="#nogo">Fishermen at Sea</a></li>
                        <li><a href="#nogo">The Shipwreck</a></li>
                        <li><a href="#nogo">The Vale of Ashburnham</a></li>
                        <li><a href="#nogo">Crossing the Brook</a></li>
                    </ul>
                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>

        <ul class="select_sub"><li><a href="#nogo"><b>John Constable</b><!--[if IE        7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="select_sub show">
                    <ul class="sub">
                        <li><a href="#nogo">The Hay Wain</a></li>
                        <li><a href="#nogo">Brighton Beach</a></li>
                        <li><a href="#nogo">Malvern Hall</a></li>
                        <li class="sub_show"><a href="#nogo">Salisbury Cathedral</a></li>
                        <li><a href="#nogo">Weymouth Bay</a></li>
                    </ul>
                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>


        <ul class="select"><li><a href="#nogo"><b>Henri Matisse</b><!--[if IE 7]><!-->       </a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="select_sub">
                    <ul class="sub">
                        <li><a href="#nogo">The Girl with Green Eyes</a></li>
                        <li><a href="#nogo">The Dream</a></li>
                        <li><a href="#nogo">Woman in Blue</a></li>
                        <li><a href="#nogo">The Yellow Dress</a></li>
                        <li><a href="#nogo">The Piano Lesson</a></li>
                    </ul>
                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>


        <ul class="select"><li><a href="#nogo"><b>Paul Cezanne</b><!--[if IE 7]><!-->              </a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <div class="select_sub">
                    <ul class="sub">
                        <li><a href="#nogo">The Large Bathers</a></li>
                        <li><a href="#nogo">Onions and Bottles</a></li>
                        <li><a href="#nogo">Mardi Gras</a></li>
                        <li><a href="#nogo">Still Life</a></li>
                        <li><a href="#nogo">Boy in a Red Waistcoat</a></li>
                    </ul>
                </div>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>

    </div>
</div>
css is

Code:
.nav {
    height:35px; 
    background: #854; 
    position:relative; 
    font-family:arial, verdana, sans-serif; 
    font-size:11px; 
    width:750px; 
    z-index:500;


}

.nav .table {
    display:table; 
    margin:0 auto;
}

.nav .select,
.nav .current {
    margin:0; 
    padding:0; 
    list-style:none; 
    display:table-cell; 
    white-space:nowrap;
}

.nav li {
    margin:0; 
    padding:0; 
    height:auto; 
    float:left;
}

.nav .select a {
    display:block; 
    height:35px; 
    float:left; 
    background: #632; 
    padding:0 30px 0 30px; 
    text-decoration:none; 
    line-height:35px; 
    white-space:nowrap; 
    color:#ddd;
}

.nav .current a {
    display:block; 
    height:35px; 
    float:left; 
    background: #134; 
    padding:0 0 0 15px; 
    text-decoration:none; 
    line-height:35px; 
    white-space:nowrap; 
    color:#fff;
}


.nav .current a b {
    display:block; 
    padding:0 30px 0 15px; 
    background:#542 right top;
}

.nav .select a:hover, 
.nav .select li:hover a {
    background: #653; 
    padding:0 0 0 15px; 
    cursor:pointer; 
    color:#fff;
}

.nav .select a:hover b, 
.nav .select li:hover a b {
    display:block; 
    float:left; 
    padding:0 30px 0 15px; 
    background:url(http://eurekavi.com/pro_line_1.gif) right top; 
    cursor:pointer;
}

.nav .select_sub {
    display:none;
}

/* IE6 only */
.nav table {
    border-collapse:collapse; 
    margin:-1px; 
    font-size:1em; 
    width:0; 
    height:0;
}

.nav .sub {
    display:table; 
    /*margin:0 auto; */
    /*padding:0; */
    list-style:none;
    background:#248;
    margin-top:-70px;
}

.nav .sub_active .current_sub a, 
.nav .sub_active a:hover {
    background:transparent; 
    color:#f00;
}

.nav .select :hover .select_sub, 
.nav .current .show {
    display:block; 
    position:absolute; 
    width:750px; 
    top:35px; 
    background: #412; 
    padding:0; 
    z-index:100; 
    left:0; 
    text-align:center;
}

.nav .current .show {
    z-index:10;
}

.nav .select :hover .sub li a, 
.nav .current .show .sub li a {
    display:block; 
    float:left; 
    background:transparent; 
    padding:0 10px 0 10px; 
    margin:0; 
    white-space:nowrap; 
    border:0; 
    color:#444;
}

.nav .current .sub li.sub_show a {
    color:#088; 
    cursor:default; 
    background:#632;
}

.nav .select :hover .sub li a:hover, 
.nav .current .sub li a:hover {
    visibility:visible; 
    color:#088; 
    background:#743;
}
Please reply. Thanks.