Jquery Menu

This is a simple Jquery menu, originally prototyped by Tomar, I just made it bold and beautiful-pearls

by openandfree

HTML

<div id='menu_Bar'>

            <div id="home" class='selector'>
                <p class='sel_name'>Home</p>
                <ul style='display: none' class='empty'>
                    <li><a href=''>option 1</a></li>
                    <li><a href=''>option 2</a></li>
                    <li><a href=''>option 3</a></li>
                    <li><a href=''>option 4</a></li>
                    <li><a href=''>option 5</a></li>
                </ul>
            </div>

            <div id="shows" class='selector'>
                <p class='sel_name'>Shows</p>
                <ul style='display: none' class='empty'>
                    <li><a href=''>option 1</a></li>
                    <li><a href=''>option 2</a></li>
                    <li><a href=''>option 3</a></li>
                    <li><a href=''>option 4</a></li>
                    <li><a href=''>option 5</a></li>
                </ul>
            </div>

            <div id="search" class='selector'>
                <p class='sel_name'>Search</p>
                <ul style='display: none' class='empty'>
                    <li><a href=''>option 1</a></li>
                    <li><a href=''>option 2</a></li>
                    <li><a href=''>option 3</a></li>
                    <li><a href=''>option 4</a></li>
                    <li><a href=''>option 5</a></li>
                </ul>
            </div>

            <div id="about" class='selector'>
                <p class='sel_name'>About</p>
                <ul style='display: none' class='empty'>
                    <li><a href=''>option 1</a></li>
                    <li><a href=''>option 2</a></li>
                    <li><a href=''>option 3</a></li>
                    <li><a href=''>option 4</a></li>
                    <li><a href=''>option 5</a></li>
                </ul>
            </div>

            <div id="faq" class='selector'>
                <p class='sel_name'>FAQ</p>
                <ul style='display: none' class='empty'>
       ...

CSS

html {
    width: 99%;
    height: 99%;
}

body {
    width: 98%;
   
  font-family:verdana;
  font-weight:16px bold;
}

#title {
    text-align: center;
    font-size: 300%;
}

#menu_Bar {
    margin: 0.01%;
}

.sel_name{
    font-size: 70%;
    text-align: center;
}

.empty {
    list-style: none;
}

.options {
    display: none;
    background-color: lightblue;
    
   
}

.selector {
    background-color:#FFEC00;
    display: inline-block;
    width: 19%;
    position:relative;
    float:left;
}



.empty {
    position: inline-block;
    width:100%;
    padding:0;
    margin:0;
}
.empty li{
    margin:2px 0;
    height:30px;
    text-align:center;
}
a{
  text-decoration:none; 
  font-family:verdana;
  font-weight:14px bold;
  color:#CC144D;
}

JavaScript

$(document).ready(function() {
    $('.selector').mouseenter(function (){
        $(this).find('> ul').slideToggle('slow');
    });
    $('.selector').mouseleave(function (){
    $(this).find('> ul').slideToggle('slow');
    });
});