_underscores theme, всплывающее подменю справа вместо левого

Question

Я разрабатываю тему WordPress на основе _underscores.По умолчанию все элементы подменю отображаются снизу и слева от основного, родительского пункта меню.Мое меню (на самом деле просто пара значков для входа в систему и поиска) отображается полностью справа.Поэтому я хочу, чтобы пункты подменю появлялись справа от пункта главного меню, а не слева.Я пытался заставить это работать, но пока не повезло.

Страница, о которой идет речь: http://vps46331.inmotionhosting.com/~hellod8/

/** Here's my CSS **/

.site-users ul ul {
  background: #3B66CA;
  float: right;
  position: absolute;
  top: 100%;
  right: -999em;
  z-index: 99999;
}
.site-users ul ul li:hover > ul,
.site-users ul ul li.focus > ul {
  right: 0;
}
.site-users ul li:hover > ul,
.site-users ul li.focus > ul {
  right: auto;
}

<!-- Here's my HTML -->

<div class="site-users">
  <nav>
    <ul>
      <li>
        <a href="#ultimem" title="Account Info"><i class="fas fa-user"></i></a>
        <ul class="sub-menu ultimem">
          <li>This is Food</li>
        </ul>
      </li>
      <li>
        <a href="#searchbox" title="Site Search"><i class="fas fa-search"></i></a>
        <ul class="sub-menu ultisearch">
          <li>
            <form role="search" method="get" class="search-form" action="http://vps46331.inmotionhosting.com/~hellod8/">
              <label>
                <span class="screen-reader-text">Search for:</span>
                <input type="search" class="search-field" placeholder="Search &hellip;" value="" name="s" />
              </label>
              <input type="submit" class="search-submit" value="Search" />
            </form>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>