css dropdown menu is showing from left to right.. want some suggestion..

See more:

ASP.NET

CSS

HTML

i have drop down menu, which is aligned right.. my problem is that dropdown list is opening from left to right. because of this my drop down menu is going out of the computer window.. Actually what i want is that dropdown menu should open from right to left instead of left to right..

Below is my css... it is purely css menu.. Actually i can't find anything from which it is showing left to right..

Please suggest what should i do for right to left..

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#cssmenu {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
  font-size: 13px;
  line-height: 15px;
  text-transform: uppercase;
  text-align:  right;
  width :100%;
  margin-left:auto;
  margin-right:auto;
 
}
#cssmenu > ul {
  width: 100%;
  list-style-type: none;
  padding: 0;
  margin: 0;
 
 
}
#cssmeni li#responsive-tab {
  display: none;
  /* Hide for large screens */

}
#cssmenu > ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
   z-index:99999;
   float: right;
}
#cssmenu > ul li.right {
 

  zoom: 1;
}
#cssmenu > ul li.right {
  float: right;
}
#cssmenu > ul li.has-sub {
  position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
  display: block;
}
#cssmenu > ul li.has-sub ul {
  display: none;
  width: 250px;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #ffffff;
  border: 1px solid #ece6e8;
  border-bottom: 3px solid #d9ced2;
  border-top: 0 none;
}
#cssmenu > ul li.has-sub ul li {
  display: block;
}
#cssmenu > ul li.has-sub > a {
 
  background-repeat: no-repeat;
  background-position: 90% -95%;
}
 
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  background: #1e7fc5 url('caret.png') no-repeat;
  background-position: 90% 195%;
}
#cssmenu > ul li a {
  display: block;
  padding: 6px 10px 6px 10px;
  text-decoration: none;
  color: White;
  text-shadow: 0px 1px 0px Black;
 
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
  background: #1e7fc5;
  color: #fff;
  text-shadow: 0px 1px 0px Black;
 
}
@media (max-width: 600px) {
  #cssmenu > ul {
    width: 100%;
  }
  #cssmenu > ul li#responsive-tab {
    display: block;
  }
  #cssmenu > ul li#responsive-tab a {
    background: url('menu.png') no-repeat;
    background-position: 95% -35%;
  }
  #cssmenu > ul li#responsive-tab a:hover {
    background-color: #1e7fc5;
    background-position: 95% 135%;
  }
  #cssmenu > ul li {
    display: none;
  }
  #cssmenu > ul li.right {
    float: none;
  }
  
  #cssmenu > ul li.has-sub {
    position: relative;
  }
  #cssmenu > ul li.has-sub ul {
    display: block;
    position: static;
    width: 100%;
    background: #ffffff;
    border: 0 none;
  }
  #cssmenu > ul li.has-sub ul li {
    display: block !important;
  }
  #cssmenu > ul li.has-sub ul li a span {
    display: block;
    padding-left: 24px;
  }
  #cssmenu > ul li.has-sub > a {
    background-image: none;
  }
}
/* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 600px) {
  #cssmenu > ul > li.collapsed {
    display: inline-block !important;
    *display: inline;
    zoom: 1;
  }
  #cssmenu > ul ul li.collapsed {
    display: block !important;
  }
}