html - CSS bug on pull menu jQuery script -

i know question bit specific, cannot solve problem.

here's demo: http://jsfiddle.net/nwmst/ (you'll see css has comments, can ignore stuff...)

the problem: notice tht menu default, has rounded corners (border-radius). when click pull menu out, 2 top corners stop having border-radius. however, if click again, close it, top corners remain same, no border radius...

i've done many different tries snippets found here @ stackoverflow, non solution looking for. i'm sorry asking this, understand jquery manipulate it, can barely program own scripts.

the pull tutorial used: http://www.hongkiat.com/blog/responsive-web-nav/

here's markup, styles , scripting (however, can see live in demo see problem is):

html markup:

<nav id="menu" class="clearfix">   <ul class="clearfix">     <li><a class="current first-item" href="#">home</a></li>     <li><a href="#">about</a></li>     <li><a href="#">portfolio</a></li>     <li><a href="#">blog</a></li>     <li><a href="#">contact</a></li>   </ul>   <a href="#" id="pull">menu</a> </nav> 

css:

#menu {text-decoration: none; } #menu ul {display: none; } #menu {text-align: center; }  #menu #pull {   display: block;   position: relative;   display: block;   font: 700 19px/1.45em 'open sans', arial, sans-serif;   color: #2e2e2e;   padding: 8px 0 6px;   border: 1px solid #bdc4c7;   background: #fff;   -webkit-box-shadow: none;   box-shadow: none;   -webkit-border-radius: 3px;   border-radius: 3px; }  /* rule i'm using on script */ #menu #pull.radius {   -webkit-border-radius: 0 0 3px 3px;   border-radius: 0 0 3px 3px; }  #menu #pull {   font-size: 25px;   padding-right: 10px; }  #menu #pull:hover, #menu #pull:focus, #menu #pull:active {color: #04bfee; }  #menu {   float: none;   clear: both; }  #menu li {   float: none;   margin: 0; }  #menu li {   position: relative;   display: block;   font: 700 12px/1em 'open sans', arial, sans-serif;   text-transform: uppercase;   color: #2e2e2e;   padding: 8px 12px 6px;   border: 1px solid #bdc4c7;   border-bottom: 0 none;   background: #fff;   -webkit-box-shadow: none;   box-shadow: none;   -webkit-border-radius: 0;   border-radius: 0; }  #menu li a.current,#menu li a:hover,#menu li a:focus {   color: #0abcff;   border: 0 none;   border: 1px solid #bdc4c7;   border-bottom: 0 none;   background: #fafafa;   -webkit-box-shadow: none;   box-shadow: none; }  #menu li a.first-item {   -webkit-border-radius: 3px 3px 0 0;   border-radius: 3px 3px 0 0; } 

jquery script:

  $(function() {     var pull = $('#pull');     menu = $('#menu ul');     menuheight = menu.height();     $(pull).on('click', function(e) {       if($(this).is('.radius')) {$(this).removeclass('radius');}       $(this).addclass('radius').siblings().removeclass('radius');       e.preventdefault();       menu.slidetoggle();     });   });   $(window).resize(function(){     var w = $(window).width();     if(w > 767 && menu.is(':hidden')) {       menu.removeattr('style');     }   }); 

thanks lot guys.

is ok: http://jsfiddle.net/nwmst/6/ ?
replace this:

  if($(this).is('.radius')) {$(this).removeclass('radius');}   $(this).addclass('radius').siblings().removeclass('radius'); 

with this:

  $(this).toggleclass('radius').siblings().removeclass('radius');