Drop down menu in jquery

Drop down menu with CSS and jquery:
Anybody want to create a drop down with jquery and CSS then you can understand with this given example below:

HTML Code:

<div class="mainPage">

    <div class="menu">

        <ul>

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

            <li class="subMenu"><a href="#">About <em></em></a>

                <ul class="serviceDrop3">

                    <li><a href="#">Menu 1</a></li>

                    <li><a href="#">Menu 2</a></li>

                    <li><a href="#">Menu 3</a></li>

                    <li class="subMenuSub"><a href="#">Menu 4 <i></i></a>

                        <ul class="serviceDrop4">

                            <li><a href="#">Sub Menu 1</a></li>

                            <li><a href="#">Sub Menu 2</a></li>

                            <li><a href="#">Sub Menu 3</a></li>

                            <li><a href="#">Sub Menu 4</a></li>

                        </ul>

                    </li>

                </ul>

            </li>

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

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

        </ul>

    </div>

</div>

CSS Code:

<style>

    .mainPage {

        margin: 0 auto;

        width: 600px;

    }

    * {

        margin: 0;

        padding: 0;

        border: 0;

        outline: 0;

    }

    .menu li {

        background: #eee;

        display: block;

        color: #333;

        float: left;

        margin: 1px;

    }

    .menu a {

        color: #333;

        display: block;

        transition: all 0.3s;

        text-decoration: none;

        padding: 5px 20px;

    }

    .menu a:hover {

        background: #c00707;

        color: #fff;

    }

    a.active {

        background: #c00707;

        color: #fff;

    }

    .serviceDrop3 {

        background: #aaa;

    }

    .subMenu,

    .subMenuSub {

        position: relative;

    }

    .subMenu em {

        border: 6px solid #000;

        border-right: 6px solid transparent;

        border-left: 6px solid transparent;

        border-bottom: 6px solid transparent;

        float: right;

        margin-top: 8px;

        margin-left: 8px

    }

    .subMenu:hover em {

        border: 6px solid #fff;

        border-right: 6px solid transparent;

        border-left: 6px solid transparent;

        border-bottom: 6px solid transparent;

    }

    .subMenuSub i {

        border: 6px solid #000;

        border-right: 6px solid transparent;

        border-top: 6px solid transparent;

        border-bottom: 6px solid transparent;

        float: right;

        margin-top: 4px;

    }

    .subMenuSub:hover i {

        border: 6px solid #fff;

        border-right: 6px solid transparent;

        border-top: 6px solid transparent;

        border-bottom: 6px solid transparent;

    }

    .serviceDrop3,

    .serviceDrop4 {

        position: absolute;

        display: none;

        width: 200px;

    }

    .serviceDrop4 {

        right: -100%;

        top: 0;

        background: #aaa;

    }

    .subMenu ul li {

        float: none;

    }

</style>

Jquery Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>

    $(document).ready(function () {

        $(".menu ul li.subMenu").hover(

            function () { $(".serviceDrop3").fadeIn("fast"); },

            function () { $(".serviceDrop3").fadeOut("fast"); });

        $("ul.serviceDrop3").hover(

            function () { $(".menu ul li.subMenu > a").addClass("active"); },

            function () { $(".menu ul li.subMenu > a").removeClass("active"); });

        $(".menu ul li.subMenuSub").hover(

            function () { $(".serviceDrop4").fadeIn(); },

            function () { $(".serviceDrop4").fadeOut();

            });

        });

</script>