图像浮动到右边... CSS

Question

我想将我的图像定位如下图所示，但它无法正常工作。

HTML

<div class="nav">
  <ul>
    <li class='photo'><img src="http://img.pixland.uz/u2012f111790m.jpg" alt="">
      </li>
    <li class='photo'>
    <img src="http://img.pixland.uz/u13301f281573m.jpg" alt="">
      </li>
    </ul>
 </div>

我的css

.navigate{
  background:#fff;
  color: #444;
  display:inline-block;
}

.nav ul{
  display:inline-block;
  position:relative;
  float:right;
}

.photo{
  float:right;
}

my code at JSFIDDLE