如何将该徽标放在导航栏菜单的左侧？

Question

我做了一个导航栏菜单，但我不知道如何将徽标放置在导航栏的左侧。

我尝试了以下操作： http://scratchpad.io/nice-slope-1036

徽标本身是圆形的。 （宽270px，高200px）

我希望徽标可以正确放置，但是它在导航栏下方。当我移动导航栏时，徽标可见，但是导航栏坏了。

body {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/e3/Lambeau_Field.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

ul li {
  float: left;
  width: 200px;
  height: 40px;
  background-color: dimgray;
  opacity: .8;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  font-family: Calibri;
}

ul li a {
  text-decoration: none;
  display: block;
  color: aqua;
}

ul li a:hover {
  background-color: darkturquoise;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}

<a href="#"><img src="logo2.png" width="270px" height="200px"></a>
<ul>
  <li><a href="#">Liga 1</a>
    <ul>
      <li><a href="#">Ştiri</a></li>
      <li><a href="#">Echipe şi jucători</a></li>
      <li><a href="#">Statistici</a></li>
      <li><a href="#">Rezultate</a></li>
      <li><a href="#">Clasament</a></li>
    </ul>
  </li>
  <li><a href="#">Campionate externe</a>
    <ul>
      <li><a href="#">Ştiri</a></li>
      <li><a href="#">Rezultate</a></li>
      <li><a href="#">Clasamente</a></li>
    </ul>
  </li>
  <li><a href="#">Tenis</a></li>
  <li><a href="#">Alte sporturi</a></li>
</ul>