title: Menu only when hovering image
body: <p>I want my menu to be hidden and when i hover an image i would like the menu to appear. I've tried following something that i've seen here in Stackoverflow but it's not working. How do i do it only with css ?</p>
  
  <p>Html:</p>
  
  <pre><code>     &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;                        
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="#"&gt;Test&lt;/a&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                &lt;li&gt;&lt;a href="#section1"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#section2"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#section3"&gt;Section 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/nav&gt;    
  &lt;img src="img/ea.PNG" class="img-responsive img-center" id="imgmenu"&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.navbar{
      display:none !important;
  }
  
  #imgmenu:hover + .navbar{
      display:block;
  }
  </code></pre>