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. 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!CSS: http://bridgedeck.org/newsite/pro_dropdown_n1.css
HTML: http://www.bridgedeck.org/newsite/incl_banner_menus_n1.html\[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\]}\[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\]}HTML:\[code\]<div id="bannercontainer"><div id="banner"> <!-- holds wheel, MMP text, and members login --> <a href="http://www.bridgedeck.org/newsite"><img src="http://stackoverflow.com/questions/14057157/images/wheellogocolor2.png" height="140" width="140"></a> <img class="mmpText" src="http://stackoverflow.com/questions/14057157/images/title_n1-2.png" alt="MMP" align="top"/> <div class="loginDiv"> <form action="https://secure.bridgedeck.org/LoggedInHome.asp" style="font-family:Calibri" method="post"> <table> <tr> <td><b>Members Login</b></td> </tr> <tr> <td>Email:</td> <td><input type="text" name="Email" width="80px"></td> </tr> <tr> <td>Password:</td> <td><input type="password" name="password" width="80px"></td> </tr> <tr> <td height="29"><input type="submit" value="http://stackoverflow.com/questions/14057157/Login" class="submit"></td> </tr> </table> </form> </div></div>\[/code\]
HTML: http://www.bridgedeck.org/newsite/incl_banner_menus_n1.html\[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\]}\[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\]}HTML:\[code\]<div id="bannercontainer"><div id="banner"> <!-- holds wheel, MMP text, and members login --> <a href="http://www.bridgedeck.org/newsite"><img src="http://stackoverflow.com/questions/14057157/images/wheellogocolor2.png" height="140" width="140"></a> <img class="mmpText" src="http://stackoverflow.com/questions/14057157/images/title_n1-2.png" alt="MMP" align="top"/> <div class="loginDiv"> <form action="https://secure.bridgedeck.org/LoggedInHome.asp" style="font-family:Calibri" method="post"> <table> <tr> <td><b>Members Login</b></td> </tr> <tr> <td>Email:</td> <td><input type="text" name="Email" width="80px"></td> </tr> <tr> <td>Password:</td> <td><input type="password" name="password" width="80px"></td> </tr> <tr> <td height="29"><input type="submit" value="http://stackoverflow.com/questions/14057157/Login" class="submit"></td> </tr> </table> </form> </div></div>\[/code\]