Drop Down Menu Flicker
I have two drop down menus: one when you hover "log"; the other, "works." They were working fine until I reduce the size of "#fgbg" (you can see the before shot in the alternative stylesheet, "Melancholy"), now they flicker like mad. Is there any solution?
Here is the page in question (viewable in Mozilla only). Here is the stylesheet:
html, body { height: 100%; width: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
body { background-image: url(<a href="http://nickadt.5u.com/escher.png" class="bb-url">http://nickadt.5u.com/escher.png</a>); color: rgb(230,230,230); font-family: "tempus sans itc", "trebuchet ms", sans-serif; font-size: 20px; font-weight: bold; letter-spacing: 1.25px; text-align: left; word-spacing: 2px; }
p { margin: 0px 0px 0px 0px; padding: 0px 0px 15px 0px; }
/*Containers*/
#bgfg { position: absolute; left: 50%; top: 50%; width: 984px; height: 500px; margin-left: -492px; margin-top: -250px; padding: 0px; }
#bg { position: absolute; top: 30px; left: 0px; width: 984px; height: 440px; background-color: rgb(100,100,100); filter: alpha(opacity=20); -moz-opacity: 0.5; opacity: 0.5; z-index: 1; }
#fgbg { position: absolute; overflow: auto; top: 30px; width: 100%; height: 440px; background: transparent; z-index: 1; }
#fg { position: absolute; z-index: 2; background: transparent; }
/*Header/footer common denominators:*/
/*All navigation.*/
div.a2, div.a4, div.a6, div.a7, div.a8, div.a9, div.b1, div.b2, div.b3, div.b4, div.b5, div.b6, div.b8 { position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: rgb(100,100,100); height: 26px; z-index: 3; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; }
/*All top elements.*/
div.a2, div.a4, div.a6, div.a7, div.a8, div.a9 { top: 0px; }
/*All bottom elements.*/
div.b1, div.b2, div.b3, div.b4, div.b5, div.b6, div.b8 { bottom: 0px; }
/*All big elements.*/
div.a7, div.a9, div.b1, div.b3, div.b5 { width: 160px; }
/*All small elements.*/
div.a2, div.a4, div.a6, div.a8, div.b2, div.b4, div.b6, div.b8 { width: 40px }
/*All links.*/
div.hub, div.log, div.works, div.info, div.net { position: absolute; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; }
/*Header*/
div.hub { top: 0px; left: 0px; }
div.a2 { left: 163px; }
div.log { top: 0px; left: 206px; }
div.a4 { left: 369px; }
div.works { top: 0px; left: 412px; }
div.a6 { left: 575px; }
div.a7 { left: 618px; }
div.a8 { left: 781px; }
div.a9 { left: 824px; }
/*Footer*/
div.b1 { left: 0px; }
div.b2 { left: 163px; }
div.b3 { left: 206px; }
div.b4 { left: 369px; }
div.b5 { left: 412px; }
div.b6 { left: 575px; }
div.net { bottom: 0px; left: 824px; }
div.b8 { left: 781px; }
div.info { bottom: 0px; left: 618px; }
/*Drop down menu:*/
/*Navigation links.*/
ul, li ul, ul li a, li ul a { color: rgb(255,255,255); font-weight: bold; text-decoration: none; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; filter: alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; position: relative; z-index: 3; }
ul { list-style: none; width: 160px; }
li ul { position: relative; width: 250px; display: none; }
/*Display.*/
li ul a, ul li a { display: block; background-color: rgb(100,100,100); }
/*Link style.*/
ul li a { background-color: rgb(100,100,100); }
li:hover ul, ul li a:hover { display: block; background-color: rgb(125,125,125); }
/*Link hover style.*/
ul li a:hover { background: rgb(50,50,50); width: 160px; }
/*Option hover style.*/
li ul a:hover { width: 250px; background: rgb(50,50,50); }