title: CSS nav bar disappear under the other div
body: <p>I have this html code</p>
  
  <pre><code>&lt;div id="navbar"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Page1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;page2&lt;/a&gt;&lt;/li&gt;
      &lt;li id="NavItem"&gt;
          &lt;a href="#"&gt;page3&lt;/a&gt;
          &lt;div id="PopOver"&gt;Some text here&lt;br&gt;Some text here&lt;br&gt;Some text here&lt;br&gt;Some text here&lt;br&gt;Some text here&lt;br&gt;Some text here&lt;br&gt;Some text here&lt;/div&gt;
      &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;page4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;div id="banners"&gt;
      &lt;div class="wrap"&gt;
          &lt;div class="left"&gt;&lt;img src="http://www.mountainecho.bizland.com/banex1.jpg"&gt;&lt;/div&gt;
          &lt;div class="right"&gt;&lt;img src="http://www.mountainecho.bizland.com/banex1.jpg"&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS code</p>
  
  <pre><code>#navbar { position: relative; margin: 3px; }
  #navbar ul { padding: 0; margin: auto; background: #f0f0f0 url(../images/1px.png) repeat-x 0 -441px; padding: 4px 0 4px 0; }
  #navbar li { display: inline; margin-right: 80px; }
  #navbar li a { font-family: EqualSansDemo; font-size: 1.6em; color: #555555; text-shadow: 1px 1px 0px #fff; }   
  #navbar li a:hover { color: #0071e4; } 
  
  
  #PopOver {
  position:absolute; 
  border:2px solid #07B1F1; 
  width:170px; 
  height:auto; 
  padding:15px 5px 10px 5px;
  display:none;
  top:30px; 
  left:229px; 
  background-color:#FFFFFF;
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  
  }
  
  #NavItem:hover #PopOver {display:block}
  
  
  #banners { padding-top: 25px; padding-bottom: 25px; position: relative;  } 
  .wrap {  width: 1000px; margin: 0 auto; }
  .left { float: left; }
  .right { float: right; }
  </code></pre>
  
  <p>The problem :</p>
  
  <p>In many of cases the nav bar will disappear under the other div</p>
  
  <p><img src="https://i.stack.imgur.com/TjSAl.gif" alt="enter image description here"></p>
  
  <p>For example i have added "#banners" div and i think the problem because of "position: relative;"</p>
  
  <p>But as i said "#banners" div is just for the example and if i need to fix this, i should in #navbar #NavItem:hover #PopOver</p>
  
  <p>Any idea please ?</p>
  
  <p>Thank you.</p>