title: Display logo in CSS menu
body: <p>I want to place a logo in my navigation menu, like this <a href="http://prntscr.com/8rwb4i" rel="nofollow">http://prntscr.com/8rwb4i</a>. I tried a lot of pieces of code, but I can't get it to work. Code can be found in fiddle <a href="http://jsfiddle.net/askoc4qh/" rel="nofollow">http://jsfiddle.net/askoc4qh/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
   width:960px;
   font-family: 'Open Sans', sans-serif;
   margin:5px auto; 
   padding:0 auto;
   
   }
  
  ul {
   height:60px;
      width:100%px;
      margin:0 auto;
      padding:0; 
      list-style-type:none;
   
   }
  
  li {
   float:left;
   width:240px;
   }
  
  ul a {
   color:black;
   text-decoration:none;
   font-size:19px;
   display:block;
   
   }
   
  ul li a {
   display:block;
   padding:20px 45px;
   line-height:1.0em;
   text-decoration:none;
   transition:500ms ease;
  }
  ul li ul {
   visibility: hidden;
  }
   
  
  ul a:hover {
   
   color:yellow; 
   background-color:black; 
   
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="navigation"&gt;
   &lt;ul&gt;
   &lt;li&gt;&lt;a href = 'index.html'&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = 'media.html'&gt;Media Design&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = 'innovatie.html'&gt;Innovatieroutes&lt;/a&gt;
   &lt;li&gt;&lt;a href = 'info.html'&gt;Opleiding&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = 'info.html'&gt;Fontys&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = 'info.html'&gt;Toekomst&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href = 'contact.html'&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>