将CSS float设置为右会导致空白空间

Question

我在使用float：right对齐按钮和文本时遇到问题;命令。但在执行此操作后，页面右侧会显示空白区域。我试着溢出：隐藏;它修复了空白区域，但也禁用了下拉菜单。

CSS代码：

/* Menu CSS */#cssmenu,
#cssmenu > ul {
  background: url(images/highlight-bg.png) repeat;
  padding-bottom: 3px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  text-align: right;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
  content: '';
  display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
  clear: both;
}
#cssmenu {
  width: auto;
  zoom: 1;
}
#cssmenu > ul {
  background: url(images/menu-bg.png) repeat;
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu > ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#cssmenu > ul > li {
  float: right;
  position: relative;
}

HTML code：

<div id="cssmenu">
  <ul>
    <li class="active"><a href="index.html"><span>خانه</span></a></li>
    <li class="has-sub"><a href="#"><span>⌄ حرفه ما</span></a>
      <ul>
        <li class="last"><a href="#"><span>فعالیت های ما</span></a></li>
      </ul>
    <li class="has-sub"><a href="#"><span>⌄ مدیا</span></a>
      <ul>
        <li><a href="#"><span>اخبار</span></a></li>
        <li><a href="#"><span>نشر</span></a></li>
        <li class="last"><a href="#"><span>دانلود</span></a></li>
      </ul>
    </li>
    <li class="last"><a href="#"><span>تماس با ما</span></a></li>
  </ul>
</div>

提前致谢。