title: CSS Dropdown Menu issue in Chrome
body: <p>I am designing a website using a CSS drop down menu (as an include to the site pages).  What SHOULD happen is when you hover over a menu item a dropdown box will appear with choices that you can then drag your mouse down to select.  It works fine in IE and Firefox, but in Chrome when you hover over a menu item and go to drag your mouse down, a container div (that is no where near where your mouse is hovering) overlaps the drop down box and it disappears.  I noticed the div when clicking view source in Chrome.  I have attached the CSS for the drop down menu and a link to the drop down menu include.  </p>
  
  <p>The CSS that I believe to be the problem is the #banner class which holds a logo, a title, and a login form.  I have it set so #bannerContainer holds #banner so that it can be centered on any screen resolution (see code below).   Any help to this problem would be greatly appreciated!  Thank you!</p>
  
  <p>CSS:  <a href="http://bridgedeck.org/newsite/pro_dropdown_n1.css" rel="nofollow">http://bridgedeck.org/newsite/pro_dropdown_n1.css</a> <br></p>
  
  <pre><code>#bannercontainer { /* centers banner items on any screen resolution */
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:105px;
  z-index:2000;
  background-image: url(images/bannerOrigBlue.png);
  </code></pre>
  
  <p>}</p>
  
  <pre><code>#banner { /* Holds wheel, mmp text and members login form*/
  position:relative;
  width:1000px;
  height:100px;
  z-index:0;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  </code></pre>
  
  <p>}</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="bannercontainer"&gt;
  &lt;div id="banner"&gt; &lt;!-- holds wheel, MMP text, and members login --&gt;
      &lt;a href="http://www.bridgedeck.org/newsite"&gt;&lt;img src="images/wheellogocolor2.png" height="140" width="140"&gt;&lt;/a&gt;
      &lt;img class="mmpText" src="images/title_n1-2.png" alt="MMP" align="top"/&gt;
          &lt;div class="loginDiv"&gt;
              &lt;form action="https://secure.bridgedeck.org/LoggedInHome.asp"  style="font-family:Calibri" method="post"&gt;
              &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;b&gt;Members Login&lt;/b&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Email:&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="Email" width="80px"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Password:&lt;/td&gt;
                  &lt;td&gt;&lt;input type="password" name="password" width="80px"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td height="29"&gt;&lt;input type="submit" value="Login" class="submit"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;/table&gt;
              &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>