Edit in JSFiddle

$(function($) {
    $.fn.fixedMenu = function() {
        return this.each(function() {
            var menu = $(this);
            $("html").click(function() {
                menu.find('.active').removeClass('active');
            });
            menu.find('ul li > a').bind('click', function(event) {
                event.stopPropagation();
                //check whether the particular link has a dropdown
                if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {
                    //hiding drop down menu when it is clicked again
                    if ($(this).parent().hasClass('active')) {
                        $(this).parent().removeClass('active');
                    }
                    else {
                        //displaying the drop down menu
                        $(this).parent().parent().find('.active').removeClass('active');
                        $(this).parent().addClass('active');
                    }
                }
                else {
                    //hiding the drop down menu when some other link is clicked
                    $(this).parent().parent().find('.active').removeClass('active');

                }
            })
        });
    }
    $(".menu").fixedMenu();
})(jQuery);

<div class="menu">
    <ul>
      <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
        <a target="_blank" href="http://plus.google.com">+You</a>
        </li>
        <!-- Using class="current" for the link of the current page -->
      <li class="current">
        <a target="_blank" href="http://www.google.co.in/">Web</a>
        </li>
      <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
        <a target="_blank" href="http://orkut.com">Orkut</a>
        </li>
      <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
        <a target="_blank" href="http://gmail.com">Gmail</a>
        </li>
      <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
        <a target="_blank" href="https://www.google.com/calendar">Calendar</a>
        </li>
      <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
        <a target="_blank" href="https://docs.google.com">Documents</a>
        </li>
      <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
        <a target="_blank" href="http://picasaweb.google.co.in/home">Photos</a>
        </li>
      <li style="float:right"><!-- Do not add any class for links with dropdown -->
        <a href="#">More<span class="arrow"></span></a>
        <!-- Drop Down menu Items -->
<ul style="right: 0px; left: auto; visibility: visible; ">
            <li><a href="http://www.google.co.in/reader">Reader</a></li>
            <li><a href="https://sites.google.com">Sites</a></li>
            <li><a href="http://groups.google.co.in">Groups</a></li>
            <li><a href="http://www.youtube.com">YouTube</a></li>
            <li>
            <div class="mid-line">
            </div>
            </li>
            <li><a href="http://www.google.co.in/imghp?hl=en&tab=wi">Images</a></li>
            <li><a href="http://maps.google.co.in/maps?hl=en&tab=wl">Maps</a></li>
            <li><a href="http://translate.google.co.in/">Translate</a></li>
            <li><a href="http://books.google.co.in">Books</a></li>
            <li><a href="http://scholar.google.co.in/">Scholar</a></li>
            <li><a href="http://blogsearch.google.co.in">Blogs</a></li>
            <li>
            <div class="mid-line">
            </div>
            </li>
            <li><a href="http://www.google.co.in/intl/en/options/">even more >></a></li>
            <li>
            <div class="mid-line">
            </div>
            </li>
        </ul>
        </li>
        <li class="single-link" style="float: right"><!-- To get right links, float the list item to the right -->
                <a href="#">Settings</a>
        </li>
    </ul>
</div>

body{
padding:0;
margin:0;
}
.menu{
position:fixed;
top:0;
left:0;
width:100%;
font:13px/27px Arial,sans-serif;
color:#3366cc;
height:30px;
background:#2D2D2D;
}
.menu a:hover{
background-color:#676767;
color:#CCCCCC;
}
.menu a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
}
.menu ul{
list-style:none;
margin:0;
padding:0 0 0 10px;
}
.menu ul li{
padding:0;
float:left;
}
ul li .wright{
padding:0;
float:right;
}
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
}
.menu ul li ul{
position:absolute;
border:1px solid #C3D1EC;
/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
   -moz-box-shadow:0 1px 5px #CCCCCC;
        box-shadow:0 1px 5px #CCCCCC;
margin-top:-1px;
display:none;
padding:0px 16px 0px 0;
}
.active ul{
display:block !important;
}
.single ul{
display:block !important;
}
.active a{
background-color:white;
border:1px solid #C3D1EC;
border-bottom:0;
/*box-shadow*/
-webkit-box-shadow:0 -1px 5px #CCCCCC;
   -moz-box-shadow:0 -1px 5px #CCCCCC;
        box-shadow:0 -1px 5px #CCCCCC;
display:block;
height:29px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#3366CC;
}
/*Styling for the link of the current page*/
.current a{
background-color:#2D2D2D;
border-top:2px solid #DD4B39;/*red ribbon at top*/
border-bottom:0;
display:block;
height:25px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#FFFFFF;
font-weight:bold;
}
.active a:hover{
background-color:white;
color:#3366CC;
}
.active ul a:hover{
background-color:#e4ebf8;
}
.active ul a{
border:0 !important;
/*box-shadow*/
-webkit-box-shadow:0 0 0 #CCCCCC;
   -moz-box-shadow:0 0 0 #CCCCCC;
        box-shadow:0 0 0 #CCCCCC;
border:0;
width:100%;
}
.arrow{
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}
.mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}