title: Add a picture/logo in a HTML-list/Navigation menu
body: <p>I'm creating a floating navigation menu for my page list in my blog, and within that list I'm trying to change one of the links into my logo. Some would just include the logo in the background of this navigation menu, but my problem is that the logo is like a ribbon that overlaps the things below, and if it were part of the background it would be cut off. </p>
  
  <p><a href="http://aergaergerg.blogspot.com.au/" rel="nofollow noreferrer">Here's</a> what I mean.</p>
  
  <p>At the moment the logo is a separate picture, but I'd like to connect them both, and include it as another 'link' because otherwise it's hiding the things below it.</p>
  
  <p>html USED:</p>
  
  <pre><code>&lt;div id='nav'&gt;
    &lt;p class='title'&gt;&lt;a href='#'&gt;&lt;/a&gt;&lt;/p&gt;
    &lt;ul id='navigation'&gt;
      &lt;li class='navigation-Blog'&gt;&lt;a href='#'&gt;Blog&lt;/a&gt;&lt;/li&gt;
      &lt;li class='navigation-Crew'&gt;&lt;a href='#'&gt;Crew&lt;/a&gt;&lt;/li&gt;
      &lt;li class='navigation-Promos'&gt;&lt;a href='#'&gt;Promos&lt;/a&gt;&lt;/li&gt;
      &lt;li class='navigation-Tricks'&gt;&lt;a href='#'&gt;Tricks&lt;/a&gt;&lt;/li&gt;
      &lt;li class='navigation-Parties'&gt;&lt;a href='#'&gt;Parties&lt;/a&gt;&lt;/li&gt;
      &lt;li class='navigation-P.J.Squad'&gt;&lt;a href='#'&gt;P.J. Squad&lt;/a&gt;&lt;/li&gt;
      &lt;li class='navigation-Chat'&gt;&lt;a href='#'&gt;Chat&lt;/a&gt;&lt;/li&gt;
      &lt;li class='navigation-Fanart'&gt;&lt;a href='#'&gt;Fanart&lt;/a&gt;&lt;/li&gt;
      &lt;li class='navigation-Graphics'&gt;&lt;a href='#'&gt;Graphics&lt;/a&gt;&lt;/li&gt;
      &lt;li class='navigation-Beta'&gt;&lt;a href='#'&gt;Beta&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS I used:</p>
  
  <pre><code> #nav
       {
        background: url(http://4.bp.blogspot.com/-dVtgikk-    kOY/UprtswP0yGI/AAAAAAAADag/Og0DtZ8t_oQ/s1600/header+base.png) no-repeat scroll top center;     background-color: none;
       width:100%;
       height:66px;
        box-shadow: 0px 1px 10px #5E5E5E;
        position:fixed;
        top:0px;
      }
  
  .title
   {
  display:none;
   color:#EDEDED;
   font-family:verdana;
   font-size:25px;
   width:350px;
   margin-top:6px;
   margin-left:150px;
   font-weight:bold;
   float:left;
  }
  
  
  #navigation
  {
   list-style-type:none; 
  }
  
  
  li 
  { 
  
  display:inline;
   padding:15px;
   }
  #nav a
  {
  font-size: 1.6em;
  text-transform: uppercase;
  text-shadow: 0 0 0.3em #464646;
   font-weight: bold;
   font-family:century gothic;
    text-decoration:none;
   color:#262626;
   opacity:0.26;
  } 
   #nav a:hover 
  {
  opacity:0.36;
  }
  </code></pre>