hi,
Am nearly finished my first website but this issue won't go away and it's driving me crazy.
As you can see I have a drop down menu at the top. The problem is a couple of my friends have reported trouble trying to access the sub menus. They can hover over the main choice but when they move the mouse down to select a link the links disappear. it's not like they can not be selected though if you press ctrl and go down then they can be selected.
Am so puzzled and so close to the end it's driving me crazy..

/* ------------------------------------ PVII Menu CSS Express Drop-Down Menu by Project Seven Development <a href="http://www.projectseven.com" rel="nofollow">www.projectseven.com</a> ------------------------------------ */ body { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 100%; background-color: #000000; margin: 24px 0; padding: 0; background-image: url(); background-repeat: repeat-x; color: #FFFFFF; } /* Container for the menu. We set top and bottom borders only because the menu container stretches the entire window width. Note that this container can go inside a fixed width element that is centered on the page, if you so desire. It can even go inside a table cell. It carries a background image for aesthetics. */ #menuwrapper { border-top: 1px solid #000; border-bottom: 1px solid #333; background-color: #000000; background-image: url(); background-repeat: repeat-x; padding-bottom: 25px; padding-right: 1px; margin-right: 0px; height: 1px; bottom: auto; } /*Clears the floated menu items. Assigned to a BR tag placed just before menuwrapper's closing DIV tag*/ .clearit { clear: both; height: 0; line-height: 0.0; font-size: 0; } /* p7menubar is the root UL and p7menubar ul applies to all the sub-menu ULs. We set padding and margin to zero to eliminate all indentation, turn bullets off, and set a font-family different from the global font-family declared for the body element above. This sets font for just the menu. Do not add a font-size here. */ #p7menubar, #p7menubar ul { padding: 0; margin: 0; list-style: none; font-family: Arial, Helvetica, sans-serif; } /* Root-Level Links. Do not change the first two properties. Adjust padding values to make the root links taller and to offset them from the left and right edges of the link box. The border right creates a separator between links. Font-size is set here and will apply to all menu levels. Font color is set to light gray. */ #p7menubar a { display: block; text-decoration: none; padding: 5px 5px 5px 10px; border-right: 1px solid #333; font-size: .85em; color: #CCCCCC; } /* Class assigned to those Root-Level links that have associated Sub-Menus. The top and bottom padding assigned this element must be the same as that assigned to the p7menubar a element. The right padding is increased to accomodate the display of background image depicting a downward pointing arrow. */ #p7menubar a.trigger { padding: 5px 16px 5px 10px; background-image: url(); background-repeat: no-repeat; background-position: right center; } /* The Root-Level list items. Floating left allows them to appear horizontally. Width is for IE5 Mac. The last rule in this style sheet will set the width for this element to auto for all other browsers - hiding it from IE5 Mac. The width is proportional. As you add and edit root menu items, you will need to test this width to ensure it is wide enough to accomodate all text. */ #p7menubar li { float: right; width: 9em; } /* Sets width for Sub-Menu box and the List Items inside - in proportional em units. This allows the sub-menu width to expand if users resize the text in their browsers. */ #p7menubar li ul, #p7menubar ul li { width: 12em; } /* The sub-menu links. We set color and turn off the right border, which would otherwise be inherited from the root link rule. We set top and bottom padding less than the root items and increas the left padding to indent the sub-menu links a small amount in from the root links. */ #p7menubar ul li a { color: #565656; border-right: 0; padding: 3px 12px 3px 16px; } /* Sub-Menu Unordered Lists describes each dropdown sub-menu grouping. Positioned Absolutely to allow them to appear below their root trigger. Set to display none to hide them until trigger is moused over. Background Color must be set or problems will be encountered in MSIE. Right and bottom borders are set to simulate a raised look. A gradient background image is assigned. */ #p7menubar li ul { position: absolute; display: none; background-color:<param name="wmode" value="transparent">; border-right: 0px solid #FFFFFF; border-bottom: 0px solid #FFFFFF; background-image: url(); background-repeat: repeat-x; } /* Changes the Text color and background color when the Root-Level menu items are moused over. The second selector sets color and background when Root-Level items are accessed with the keyboard tab key. The third selector sets an active state to support keyboard access in MSIE. The fourth selector is assigned to IE5 and IE6 Windows via the P7_ExpMenu script. Note that IE7 supports hover on elements other than links and so behaves like Firefox, Opera, and Safari - making the menu operable even if JavaScript is not enabled. */ #p7menubar <a>:hover a, #p7menubar a:focus, #p7menubar a:active, #p7menubar li.p7hvr a { color: #000000; background-color: #C19674; } /* Set the Sub-Menu UL to be visible when its associated Root-Level link is moused over. The second selector is assigned to IE5 and IE6 via the P7_ExpMenu script. */ #p7menubar li:hover ul, #p7menubar li.p7hvr ul { display: block; } /* Sets the Text color of the Sub-Level links when the Root-Level menu items are moused over. The second selector is assigned to IE5 and IE6 via the P7_ExpMenu script. The color set should march the normal Sub-Level link color in the rule: #p7menubar ul li a. The background color must be transparent to allow the underlying gradient background on the UL to show through. */ #p7menubar li:hover ul a, #p7menubar li.p7hvr ul a { color: #000000; background-color: transparent; } /* The normal hover class for Sub-Level links. The Important directive is required for older browsers. We set a background color, which shows over the gradient background. We set text color to white. */ /* hide from IE mac \*/ #p7menubar li {position: static; width: auto;} /* end hiding from IE5 mac */ #p7menubar ul a:hover { background-color: #000000!important; color: #FFFFFF!important; } /* The single backslash \ character inside this comment causes IE5 Mac to ignore the following rule, which allows other browsers to render top-level menu items to their natural width. Do not edit this rule in any way. */ #p7menubar li {width: auto;} #outer #right div { } #outer #right a { padding-bottom: 10px; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="robots" content="noodp"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- TemplateBeginEditable name="doctitle" --> <title>Lee Hughes | The adventure of a lifetime</title> <!-- TemplateEndEditable --> <meta name="Keywords" content="Adventure, cycling, inspiration, travel, expeditions, Action aid, Walking, photography, motivation, " /> <meta name="Description" content="Adventurer Lee Hughes will embark on a round the world cycling expedition and walking the length of New Zealand and more" /> <link rel="alternate" type="application/rss+xml" title="Lee Hughes RSS feed" href="http://www.leehughes.co.uk/feed.xml" /> <style type="text/css"> html, body, p, h1, h2, h3, h4, h5, h6 { margin:0 0 1em; border: 1px none #CCCCCC; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 105%; text-decoration: none; } html, body { height:100%; color: #FFFFFF; } a:link { font-family: Arial, Helvetica, sans-serif; color: #999999; text-decoration: none; } a:visited { color: #FFFFFF; text-decoration: none; } a:hover { color: #003366; text-decoration: none; } a:active { color: #FFFFFF; text-decoration: none; } body { padding:0; margin:0; color: #fff; background:#000; } #outer { min-height:100%; margin:-56px auto 0; min-width:700px; max-width:1150px; overflow:hidden; } * html #outer { height:100%; } /* IE6 and under treat height as min-height anyway*/ #header { color: #000; text-align:center; position:relative; border-top:56px solid #000; min-height:300px; background-repeat: no-repeat; background-position: 50% 50px; background-image: url(images/nugget-point-lighthouse.jpg); } /* mac hide \*/ * html #header { height:300px; } /* end hide*/ #right { position:relative; width:220px; float:right; padding-left: 10px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration: none; } #content { overflow:hidden; } * html #content { height:1%; overflow:visible } #footer { width:100%; clear:both; height:56px; text-align:center; position:relative; } #footer p { margin:0 } </style> <link href="dropdown.css" rel="stylesheet" type="text/css" /> <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --> <link href="links.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style6 {font-size: 120%} --> <script type="text/javascript" src="p7exp/p7exp.js"></script> <link href="dropdown.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 7]> <style> #menuwrapper, #p7menubar ul a {height: 1%;} a:active {width: auto;} </style> <![endif]--> </style> </head> <body onLoad="P7_ExpMenu()"> <div id="outer"> <div id="header"> <div align="left"> <p><font color="#FFFFFF" size="5">The adventure of a lifetime</font><font size="5"></font></font></p> <div id="menuwrapper"> <ul id="p7menubar"> <li><a href="Sponsorship/index.html">Sponsorship</a></li> <li><a class="trigger" href="#">Contact me</a> <ul> <li><a href="http://www.facebook.com/home.php#/profile.php?id=881485724&ref=profile">Facebook</a></li> <li><a href="http://twitter.com/leehughes21">Twitter</a></li> <li><a href="http://www.vimeo.com/user1920247/videos">Vimeo</a></li> <li><a href="http://www.youtube.com/user/rhythmofthecosmos">Youtube</a></li> <li><a href="http://www.flickr.com/photos/39535358@N02/">Flickr</a></li> <li><a href="mailto:rhythmofthecosmos@gmail.com">Email</a></li> </ul> <li><a class="trigger" href="#">Miscellaneous</a> <ul> <li><a href="Links/index.html">Links</a></li> <li><a href="Facts_and_stats/index.html">Facts and stats</a></li> <li><a href="FAQs/index.html">FAQs</a></li> <li><a href="Equipment/index.html">Equipment</a></li> </ul> <li><a class="trigger" href="#">Blog</a> <ul> <li><a href="#">August 2009</a></li> </ul> <li><a class="trigger" href="#">Charity</a> <ul> <li><a href="Charity/index.html">About Action Aid</a></li> <li><a href="http://www.justgiving.com/leehughes-theadventureofalifetime/">Donate</a></li> </ul> </li> <li><a class="trigger" href="#">Multimedia</a> <ul> <li><a href="Video/index.html">Video</a></li> <li><a href="Photography/index.html">Photography</a></li> <li><a href="Media/index.html">Media</a></li> </ul> </li> <li><a class="trigger" href="#">Expeditions</a> <ul> <li><a href="Walk_New_Zealand/index.html">Walk New Zealand</a></li> <li><a href="Future_expeditions/index.html">Future expeditions</a></li> </ul> </li> <li><a class="trigger" href="#">Route</a> <ul> <li><a href="Route/2D.html">2D Route</a></li> <li><a href="Route/3D.html">3D Route</a></li> </ul> <li><a href="index.html">Home</a></li> </li> </ul> <br class="clearit"> </div> <p> </p> </div> </div> <div id="right"> <p><font face="Arial, Helvetica, sans-serif"><a href="Subscribe/index.html">Subscribe</a> to my RSS</font><a href="http://www.leehughes.co.uk/Subscribe/subscribe.html"><img src="images/feed.png" width="24" height="24" border="0" /></a></p> <p><a href="http://www.justgiving.com/leehughes-theadventureofalifetime/">Donate</a> </p> <p> <div align="center" style="width:auto;margin:5px 0 5px 0;"> <div style="text-align:center;background: url(<a href="http://growpa.bay.livefilestore.com/y1p1JeFiVQxeaaSNM7rLzFp9cfrF9LJTtqru4c5Y6ex4j21tv9tmMFCCqg7Hf-RBE7WEb9NO5uC_CSebPLHx9LTnQ/google_t-bg_black-200.gif" rel="nofollow">http://growpa.bay.livefilestore.com/y1p1JeFiVQxeaaSNM7rLzFp9cfrF9LJTtqru4c5Y6ex4j21tv9tmMFCCqg7Hf-RBE7WEb9NO5uC_CSebPLHx9LTnQ/google_t-bg_black-200.gif</a>); height:68px;width:200px;"> <!--GOOGLE TRANSLATE MINI FLAGS--> <div align="center" style="padding:11px 0px 0px 0px;"> <!-- Add English to Chinese (Simplified) BETA --> <a class="flag" target="_blank" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="English to Chinese (Simplified)"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1pQ5bRM2Lm7VU2E2iwJ1MJz09OaVwoyJY6TtbjR7VQLmNu39puWmGg1LY0k5a-lmHpda4Oeu_NcY0PJKzIarIc6w/_chinese_s.png" height="19" /></a> <!-- END English to Chinese (Simplified) BETA--> <!-- Add English to French --> <a class="flag" target="_blank" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="English to French"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1pZkOZuFrM2sfRPj1TipjP7-l58fcwVMlxLtW2ZZffff6aZPkf2JH0WY7FPJouuuAydVPGT-iVzw_22CE_nK3kVw/_french_s.png" height="19" /></a> <!-- END English to French --> <!-- Add English to German --> <a class="flag" target="_blank" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1p2re-bszof6dOzflMtZ7vgOsT-8hXzor3_06ZeeBF4EgO5MTeQrNDz2WtKtmnl1h7fkToUOjZpSJMI_XMfEyuIQ/_german_s.png" height="19" /></a> <!-- END English to German --> <!-- Add English to Italian --> <a class="flag" target="_blank" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1phWz47s0hNJzIRF_WOPEIsQvHUvb7EWAYhEM0EdjXgSG3ToC1sd4s8VpnQ23dr4gJV0vNoP_E8STD-s5qWsrGHA/_italian_s.png" height="19" /></a> <!-- END English to Italian --> <!-- Add English to Japanese BETA --> <a class="flag" target="_blank" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="English to Japanese"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pP_zpPA193rDjRF3CvFTJFmZ-t0Hl_kMhFIszf2TFKG0e-Id9t31LFjkE2uAHGM4GS-EtM967kxoQL3XwVAZxYA/_japanese_s.png" height="19" /></a> <!-- END English to Japanese BETA --> <!-- Add English to Korean BETA --> <a class="flag" target="_blank" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pjstldJvOa5sDIJT-vSat82oEXXZi79_kjEBhhVZszfeoq9VGdl86NYcEi_dhMom3VIjkYhhBVcYSgHRSyYdNHA/_korean_s.png" height="19" /></a> <!-- END English to Korean BETA --> <!-- Add English to Russian BETA --> <a class="flag" target="_blank" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="English to Russian"><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1pWR0MWZQN3xOED2pR_q2tN1ffs7wHKiKcJX3Vb8BYoDHTaryBtr5WauI6F5XeiPouFVsR2COpePn2Je_zT57dlw/_russian_s.png" height="19" /></a> <!-- END English to Russian BETA --> <!-- Add English to Spanish --> <a class="flag" target="_blank" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="19" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pRAQRDcq6umjWnC9seZjWu9JIOaExQjFvZTUV5MkpJayOWj6sd0wqcyvAZw8Jhce6qHDzMJkj9JrzUCxxYHBoJg/_spanish_s.png" height="19" /></a> <!-- END English to Spanish --></div> </div> <div style="text-align:center;width:200px;"> <small> </div> </div> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div id="content"> <p> </p> <p>Site is currently under construction. If you can't get the links to work, use firefox!! </p> <p>Shortly after finishing his degree Lee Hughes will embark on a incredible journey. He will head east with this bike solo with nothing but using his stupidity and the power of his legs. This epic journey will see him cycle around 12 000 miles to his next destination New Zealand. Once arriving in New Zealand Lee’s second expedition will see him walk the length of New Zealand with his best friend. </p> <p>After this the second stage of the cycling trip will begin at the bottom of Patagonia.The end of this stage will be in Alaska. At this point in his adventure a third possible expedition will hopefully be planned, this is dependent on circumstances and resources available at the time. The route home will also de dependent on a number of things. At this point in time the plan is to buy land in a different country than England and live a more simple life. Where this country lies is currently unknown but the final ride home will be heavily influenced by his new home. </p> <p>As well as all this Lee hopes to raise as much money as possible for Action Aid. </p> <p>Their vision:</p> <p> A world without poverty and injustice in which every person enjoys their right to a life with dignity.</p> <p> Their mission:</p> <p>To work with poor and excluded people to eradicate poverty and injustice.</p> <p> </p> <p> Please make a donation to this cause and we hope you enjoy the website and subscribe. </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> <!-- end outer div --> <div id="footer"> <p class="sponsor"> </p> <p class="sponsor"><font size="4">Sponsorship logos here</font></p> <p class="copy">Copyright © <a href="http://www.leehughes.co.uk" rel="nofollow">www.leehughes.co.uk</a>. All Rights Reserved</p> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-9391160-1"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html>
thanks
forgot to say it works fine
forgot to say it works fine in other browsers.
update... I have narrowed
update...
I have narrowed down the problem to that of IE does not like the code I put in for the transparent colour as my backround
<param name="wmode" value="transparent">
My aim is to get the drop down background to transparent then when hover over the link background goes black with white font colour to highlight the link..
Is there a code for a transparent background that works well with MSIE?
thanks