总是有一个带有css的左浮动列表元素

我有一个带有以下HTML代码的导航:

<ul id="nav">
  <li><a>home</a></li>
  <li><a>login</a></li>
  <li class="selected"><a>shop</a></li>
  <li><a>help</a></li>
</ul>

我要完成的是,带有“选定”类的元素总是出现在导航的左侧。

因此,如果选择Shop,则渲染的导航将如下所示:
商店家庭登录帮助

如果选择帮助:
帮助家庭登录店

我的CSS:

#nav li {
display: inline; }

#nav li.selected {
  width: 230px;
  text-align: center;
  background: #b52830;
  margin-right: 10px;
  float: left;
  display: block; }

  #nav li.selected a {
    display: block;
    padding-right: 0; }

    #nav li.selected a:hover {
      color: #fff; }

它适用于某些浏览器,但不适用于所有浏览器。有什么想法吗?

如果不起作用,所选元素将移动到其余元素的下方…

店铺选择:
家庭登录帮助
商店