title: How do I make a hidden "div" visible on mouse hover?
body: <p>I'm creating a dropdown menu that will contain the search engine form for a <strong>fixed menu ba</strong>r, that should display the search form when I hover the "search icon". The problem is that when I hover over it, it doesn't display the submenu and I don't think that it's even getting the "hover" events. </p>
  
  <p>This is the effect I am trying to get
  <img src="https://i.stack.imgur.com/Egvzh.png" alt="This is the effect I am trying to get"></p>
  
  <p>But even after adding the hover effect with visibility to visible, it remains like this
  <img src="https://i.stack.imgur.com/77Ofm.png" alt="But even after adding the hover effect with visibility to visible, it remains like this"></p>
  
  <p>This is my HTML code:</p>
  
  <pre><code>    &lt;div class="searchBar"&gt;
              &lt;li&gt;
                  &lt;img src="templateFiles/search.png"&gt;
  
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;form action="search.php" method="get" &gt;
                              &lt;input type="text" name="search" placeholder="Procure No Site" id="writeBox"&gt;
                              &lt;input name="searchSubmit" type="submit" value="Procurar" id="button"&gt;
                          &lt;/form&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And here's the CSS:</p>
  
  <pre><code>/*******Search Bar******/
  .searchBar{
  margin-top:30px;
  float:right;
     /* display:inline;*/
  }
  
  .searchBar li, .searchBar img{
  width:30px;
  height:30px;
  }
  
  .searchBar li ul{
  position:absolute;
  visibility:hidden;
  }
  
  .searchBar li:hover .searchBar li ul{
  visibility:visible;
  }
  </code></pre>