Custom Dropdown menu not working with links

[onglider]

I'm trying to make a custom menu using a tutorial I found.The problem I'm running into is not the implementation, but something that stops me from clicking through links. When, I have the menu "opened" and when I click on a say link, it just closes the menu and for a quick second I see it highlight the whole box instead of the link.Here are a few screenshots. You can hover over the links (they turn purple when hovered), but when you click on an individual link it tends to just click out of the whole menu instead of sending you to the said page. But when, I hover over it I can see that it is showing the link in the bottom left hand corner of my browser. I just can't seem to figure out what is happening with the click out instead of the url sending you to the page. http://cl.ly/image/0S2F2c3h3g1o(hover screen shot)http://f.cl.ly/items/3P1h27323B203E2J0N41/clickout.png (clickout) When I try to click on any link, I just get this blue box, and it closes the menu instead of sending you to the linked page. This is the HTML that I have hooked up \[code\] <!-- MOBILE MENU / --><nav id="mobile-menu"> <div id="mobmenu" class="dropdown-menu" tabindex="1"> <ul class="dropdown" tabindex="1"> <li><a href="http://stackoverflow.com/about">ABOUT</a></li> <li><a href="http://stackoverflow.com/work">WORK</a></li> <li><a href="http://stackoverflow.com/notes">NOTES</a></li> </ul> </div> </nav><!-- / MOBILE MENU -->\[/code\]This is the Javascript. \[code\] function DropDown(el) { this.dd = el; this.opts = this.dd.find('ul.dropdown > li'); this.val = ''; this.index = -1; this.initEvents(); } DropDown.prototype = { initEvents : function() { var obj = this; obj.dd.on('click', function(event){ $(this).toggleClass('active'); return false; }); obj.opts.on('click',function(){ var opt = $(this); obj.val = opt.text(); obj.index = opt.index(); }); }, getValue : function() { return this.val; }, getIndex : function() { return this.index; } } $(function() { var dd = new DropDown( $('#mobmenu') ); $(document).click(function() { // all dropdowns $('.dropdown-menu').removeClass('active'); }); }); </script>\[/code\]And the CSS. \[code\]#mobile-menu { width: 320px;}.dropdown-menu { background: #050607 url(images/menu_closed.png) no-repeat center top; border: none; color: #FFF; cursor: pointer; height: 50px; font-weight: bold; margin-top: 17px; outline: none; position: fixed; -webkit-appearance: none; width: 320px; z-index: 9999;}.dropdown-menu::after { content: ""; width: 0; height: 0; position: absolute; right: 16px; top: 50%; margin-top: -6px;}/* ACTIVE STATE */.dropdown-menu .dropdown { background: #050607; height: 1000px; list-style: none; overflow: hidden; pointer-events: none; position: absolute; top: 100%; left: 0; right: 0; opacity: 0.0;}.dropdown-menu .dropdown li { position: relative; top: 10px; z-index: 99;}.dropdown-menu .dropdown li a { border-top: 1px solid #1f1f1f; color: #FFF; display: block; font-family: 'Open Sans', sans-serif; font-size: 30px; font-weight: 200; letter-spacing: 8px; pointer-events: visible; padding: 15px 25px 15px 25px; text-align: center; text-decoration: none; z-index: 9999999999999999999999;}.dropdown-menu .dropdown li:nth-child(5) { font-size: 15px; font-weight: 100; letter-spacing: 2px; text-align: center;}.dropdown-menu .dropdown li:hover a { background: #050607; color: #605e90; }.dropdown-menu.active .dropdown { -moz-animation: fadein .3s linear; -webkit-animation: fadein .3s linear; -ms-animation: fadein .3s linear; animation: fadein .3s linear; pointer-events: auto; opacity: 1.0; z-index: 999999 !important;}.dropdown-menu.active:active { pointer-events: auto;}.dropdown-menu.active::after { border-color: #000; margin-top: -3px; }.dropdown-menu.active { background: #050607 url(images/menu_open.png) no-repeat center top; outline: none;}\[/code\]Thanks! :3