jQuery slide up/dwon demo

by Budhram Gurung

HTML

<nav id="na">
    <ul>
        <li id="na1"><a href="#"> Details &nbsp;&nbsp;&nbsp;<img src="img/arrow2.gif"/></a>

            <ul id="content1">
                <table>
                    <tr>
                        <td>
                            <li><a href="#">123</a>

                            </li>
                            <li><a href="#">65789</a>

                            </li>
                            <li><a href="#">123456</a>

                            </li>
                        </td>
                        <td>
                            <img src="img/img1.jpg" style="width:200px; height:175px;" />
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                </table>
            </ul>
        </li>
        <li id="na2"><a href="#"> Accounting&nbsp;&nbsp;&nbsp;<img src="img/arrow2.gif"/></a>

            <ul id="content2">
                <table>
                    <tr>
                        <td>
                            <li><a href="#"> Cut Period</a>

                            </li>
                            <li><a href="#"> Activity Report</a>

                            </li>
                            <li> <a href="#"> Allocation</a>

                            </li>
                            <li> <a href="#"> Report</a>

                            </li>
                            <li> <a href="#">Comparison</a>

                            </li>
                            <li> <a href="#"> Days Report</a>

                            </li>
                        </td>
                    </tr>
                </table>
            </ul>
        </li>
    </ul>
</nav>

CSS

/* menu 
----------------------------*/
 #na {
    line-height:10px;
    font-size:13px;
    font-family:Arial;
    font-weight:bold;
    color:black;
    text-decoration:none;
    display:block;
    position:static;
    background-image:none;
    padding:;
    margin: -13px 0px 0px 0px;
    letter-spacing:normal;
}
/* menu body
----------------------------*/
 nav {
    text-align: center;
    color:#003399;
    font-weight:bold;
    padding: 0px 0px 0px 0px;
}
nav ul ul {
    display: none;
}

nav ul {
    background:#f79621;
    background: #f79621;
    /* Old browsers */
    background: -moz-linear-gradient(top, #f79621 2%, #f9c667 52%, #f9c667 93%, #f9c667 97%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2%, #f79621), color-stop(52%, #f9c667), color-stop(93%, #f9c667), color-stop(97%, #f9c667));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f79621 2%, #f9c667 52%, #f9c667 93%, #f9c667 97%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f79621 2%, #f9c667 52%, #f9c667 93%, #f9c667 97%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f79621 2%, #f9c667 52%, #f9c667 93%, #f9c667 97%);
    /* IE10+ */
    background: linear-gradient(to bottom, #f79621 2%, #f9c667 52%, #f9c667 93%, #f9c667 97%);
    /* W3C */
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
    padding: 0px 0px 0px 0px;
    border-radius: 2px;
    list-style: none;
    position: relative;
    display: inline-table;
    effect : slide;
    white-space:nowrap;
    /*	font-weight:bold; 	*/
}
nav ul:after {
    content:"";
    clear: both;
    display: block;
}
nav ul li {
    float: left;
}
nav ul li:hover {
    background: white;
}
nav ul li:hover a {
    color: black;
}
nav ul li a {
    display: block;
    padding: 12px 24px;
    /* Height */
    color: black;
    text-decoration: none;
}
nav ul ul {
    background: #fcf7f7;
    /* Sub menu Background colour */
    position:...

JavaScript

$(document).ready(function () {
    $("#na ul li").hover(function () {
         $(this).siblings().find('ul').slideUp(400);
            $(this).find('ul').slideDown(400);        
    }, function () {
       $(this).find('ul').slideUp(400);
    });
});