title: How to place icon in navigation bar
body: <p>Hi I have created a navigation bar and I want to place a home image icon at the start of the navigation. However when I try to it either moves the other items down or when I hover over the icon the hover doesn't work properly.</p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;div id="nav_wrapper"&gt;
        &lt;ul&gt;
           &lt;li class="icon-home"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
  
              &lt;li id="et"&gt; &lt;a href="#"&gt;England&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="Premiership.html"&gt;Premiership&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href= "#"&gt;Championship&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;League 1&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;League 2&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li id="et"&gt; &lt;a href="#"&gt;France&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Ligue 1&lt;/a&gt; 
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li id="et"&gt; &lt;a href="#"&gt;Germany &lt;/a&gt;
  
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Bundesliga&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li id="et"&gt; &lt;a href="#"&gt;Italy&lt;/a&gt;
  
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Serie A&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li id="et"&gt; &lt;a href="#"&gt;Spain&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt;La Liga&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;    
  
      &lt;/div&gt;
      &lt;!-- Nav wrapper end --&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>In the link below I managed to get the heading in line however the hover effect doesn't work.  <a href="http://jsfiddle.net/mxohL7kL/" rel="nofollow">http://jsfiddle.net/mxohL7kL/</a></p>