Как создать горизонтальную скользящую панель подменю для моего сайта?

Я хочу создать горизонтальное скользящее подменю для моего сайта. Когда вы нажимаете на пункт Menu Item 2 панель подменю отображается/скрывается при помощи функции скольжения или что-то в этом роде.

Просто, например, мне не нравится, что я защищаю авторские права или что-то вроде меню навигации GoDaddy.com.

Вот мой - JSFiddle

В этом меню есть несколько вещей, которые я хочу -

1. Затухает вся страница, когда меню расширяется.

2. Когда вы щелкаете в другом месте, а затем подменю на странице постепенного исчезновения, панель подменю автоматически разваливается.

3. И он также рухнет, когда вы снова нажмете тот же элемент меню.

4. Он будет скользить и плавно скользить.

HTML

<div id="header">
    <div id="main-header" class="center">
        <div id="menu">
            <ul>
                <li><a href="#">Menu Item 1</a>
                </li>
                <li><a href="#" id="button" onclick="showhide()">Menu Item 2</a>
                </li>
                <li><a href="#">Menu Item 3</a>
                </li>
                <li><a href="#">Menu Item 4</a>
                </li>
                <li><a href="#">Menu Item 5</a>
                </li>
                <li><a href="#">Menu Item 6</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="sub-menu"><a href="#">Sub Menu Panel</a>
</div>
<div id="container"></div>
<div id="footer"></div>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    width: 100%;
    height: auto;
    margin: 0px;
    padding: 0px;
}
a {
    text-decoration: none;
}
.center {
    margin-right: auto;
    margin-left: auto;
}
#header {
    background-color: #333333;
    position: relative;
    width: 100%;
    height: auto;
    top: 0px;
}
#main-header {
    position: relative;
    width: 1200px;
    height: 115px;
}
#menu {
    position: absolute;
    width: 100%;
    top: 85px;
}
#menu ul {
    margin: 0px;
    padding: 0px;
}
#menu ul li {
    float: left;
    list-style: none;
}
#menu ul li a {
    font-size: 16px;
    color: #FFFFFF;
    display: block;
    clear: both;
    margin-right: 40px;
}
#menu ul li a:hover {
    color: #99FF00;
}
#sub-menu {
    font-size: 24px;
    background-color: #eee;
    position: relative;
    width: 100%;
    height: 300px;
    text-align: center;
    padding-top: 30px;
}
#container {
    background-color: #ff00ff;
    position: relative;
    z-index: -999;
    width: 100%;
    height: 600px;
}
#footer {
    background-color: #333333;
    position: relative;
    width: 100%;
    height: 200px;
}

JavaScript

function showhide() {
    var div = document.getElementById("sub-menu");
    if (div.style.display !== "none") {
        div.style.display = "none";
    } else {
        div.style.display = "block";
    }
}

Пожалуйста, помогите мне с использованием JavaScript или jQuery, я знаю, что мне не хватает всего скрипта, но помогите мне.