problem with sub menu

<div class="menubar">
  <div class="middle">
<?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'container' =>'nav', 'menu_class' =>'topnav' ) ); ?>
        <div class="searchar">
          <form>
                <input type="text" name="#" placeholder="جستجو کنید ..." >
                <input type="submit" name="#" value="">
          </form>
        </div>
  </div>
</div>

.menubar {
width: 100%;
height: 45px;
background: #424242
}
.middle {
width: 1000px;
margin: auto
}
.menubar ul {
list-style: none
}
.menubar ul:after {
  content: ""; clear: both; display: block;
}
.menubar ul li {
float: right;
position: relative;
}
.menubar ul li a {
color: #f5f5f5;
text-decoration: none;
padding: 12px 15px;
line-height: 15px;
display: block;
font: 15px iMitra
}
.menubar ul li:hover {
background: #303030
}
.menubar ul li ul {
display: none;
position: absolute;
top: 44px;
right: 0px;
background: #303030;
width: 170px;
z-index: 9999;
visibility: hidden;
}
.menubar ul li:hover ul {
display: block;
visibility: visible;
}
.menubar ul li ul li {
float: none
}
.menubar ul li ul li:hover {
background: #e74c3c
}