View Full Version : Help - Fly out menu not working in IE7

05-02-2011, 06:38 PM
For some reason this menu does not work in IE7 -

My website is:http://all-things-aviation.com/pilot-shop

My style-3.css is as follows;

/* common styling */
.cssfly {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:10px 0 50px;}
.cssfly ul li a, .menu ul li a:visited { display:block; text-decoration:none; color:#000; width:104px; height:20px; text-align:center; border-width:1px 1px 0 0; background: #003366; color:#ffffff; line-height:19px; font-size:11px; border-color: #fff; border-style: solid; }
.cssfly ul {padding:0; margin:0;list-style-type: none; }
.cssfly ul li {float:left; margin-right:1px; position:relative;}
.cssfly ul li ul {display: none;}

/* specific to non IE browsers */
.cssfly ul li:hover a {color:#fff; background:#000;}
.cssfly ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.cssfly ul li:hover ul li a.hide {background:#ccc; color:#000;}
.cssfly ul li:hover ul li:hover a.hide {width:150px;}
.cssfly ul li:hover ul li ul {display: none;}
.cssfly ul li:hover ul li a {display:block; background:#ccc; color:#000; width:150px;}
.cssfly ul li:hover ul li a:hover {background:red; color:#000;}
.cssfly ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;}
.cssfly ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
.cssfly ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}

My html is:

<div class="cssfly">

<li><a href="#">Aviator Sunglasses</a>
<li><a href="/sunglasses/aviator-sunglasses/">Randolph Aviators</a></li>
<li><a href="/sunglasses/randolph-concorde/">Randolph Concorde</a></li>
<li><a href="/sunglasses/randolph-crew-chief/">Randolph Crew Chief</a></li>
<li><a href="/sunglasses/randolph-intruder/">Randolph Intruder</a></li>
<li><a href="/sunglasses/randolph-jag/">Randolph Jag</a></li>
<li><a href="/sunglasses/randolph-raptor/">Randolph Raptor</a></li>
<li><a href="/sunglasses/ao-original-pilot/">AO Original Pilot</a></li>
<li><a href="/sunglasses/ao-general/">AO General</a></li>
<li><a href="/sunglasses/serengeti-aviators/">Serengeti Aviators</a></li>
<li><a href="/sunglasses/serengeti-velocity/">Serengeti Velocity</a></li>
</li> <!-- end "Sunglasses" list item -->

<li><a href="#">FLITELite</a>
<li><a href="/flitelite/">FLITELite</a></li>
</li><!-- end "FLITELite" list item -->

<li><a href="#">Gleim Manuals</a>
<li><a href="/private-pilot/gleim-private-pilot-manual/">Gleim Private Pilot</a></li>
</li> <!-- end "Gleim Manuals" list item -->

<li><a href="#">Flight Computers</a>
<li><a href="/private-pilot/pathfinder-cx-2-flight-computer/">ASA Pathfinder CX-2</a></li>
</li> <!-- end "Flight Computers" list item -->

<li><a href="#">FAR/AIM Manuals</a>
<li><a href="/jepp-far-aim/">Jepp FAR/AIM Manual</a></li>
<li><a href="/gleim-far-aim/">Gleim FAR/AIM Manual</a></li>
<li><a href="/asa-far-aim/">ASA FAR/AIM Manual</a></li>
</li> <!-- end "FAR/AIM Manuals" list item -->

<li><a href="#">Garmin Manuals</a>
<li><a href="/garmin-gns530430-training-manuals/">Garmin530/430 Manualsl</a></li>
</li> <!-- end "FAR/AIM Manuals" list item -->

<li><a href="#">Jepp Pilot Manuals</a>
<li><a href="/private-pilot/jeppesen-private-pilot-manual/ ">Private Pilot</a></li>
<li><a href="/jeppesen-instrument-commercial/">Instrument Commercial</a></li>
<li><a href="/jeppesen-flight-instructor-textbook/">Jepp CFI Manual</a></li>
</li> <!-- end "Jepp Pilot Manuals" list item -->

<li><a href="#">Paper Airplanes</a>
<li><a href="/piper-cub/">Piper J-3 Cub</a></li>
<li><a href="/cessna-bobcat/">Cessna Bobcat</a></li>
<li><a href="/curtiss-jn4-jenny/">Curtiss JN-4 Jenny</a></li>
<li><a href="/lockheed-vega-winnie-mae/">Vega Winnie Mae</a></li>
<li><a href="/messerschmitt-me109d/">Me109D</a></li>
<li><a href="/messerschmitt-me109e/">Me109E </a></li>
<li><a href="/messerschmitt-me1112/">Me1112</a></li>
<li><a href="/nieuport-17/">Nieuport 17</a></li>
<li><a href="/north-american-p51a/">P-51A Mustang</a></li>
<li><a href="/spad-vii/">Spad VII</a></li>
<li><a href="/spad-xiii/">Spad XIII</a></li>
</li><!-- end "Paper Airplane Models" list item -->


The problem I have is that in Internet Explorer 7 it will show all the items in the drop down, but when I go to access some of them they disappear.

For example, the Aviator Sunglasses drop down flyout list shows all the items, but when I go to access them they disappear. The strange part is that some of the main items further down (like Paper Airplanes) work fine.

I would appreciate any help.



05-03-2011, 11:01 AM
#sidebarleft li li li {
padding: 0;

05-03-2011, 02:24 PM
Thank you for your reply; however, I am a newbie when it comes to coding.

Where do I use the code you provided? I don't understand what I am supposed to do with the code you provided, where to put it, etc? Do I add to the style-3.css file, replace that file with your code, or what do I do?

Please provide a little more specific information please.


05-03-2011, 02:49 PM
In your http://all-things-aviation.com/wp-content/themes/wp-chatter%20basic/style.css, you've
#sidebarleft li li li {
padding: 1px 0;
Change that highlighted line to padding: 0;

05-03-2011, 11:41 PM
Many thanks for your help!

Works like a charm.