Home | Advertise | Contact

RSS Feed | Email RSS

Fixing CSS Drop-Down Menus That Hide Behind Flash Objects

By | Filed Under CSS
Tag(s): , ,

300x250 Fixing CSS Drop Down Menus That Hide Behind Flash Objects

One of the more common issues with embedding a flash object on your home page (or any page for that matter) is that if it is near the navigation and you have CSS drop-down menus, then you may find your drop-down menu getting lost behind the flash object. If you haven’t dealt with this before it can feel like a nightmare, but fortunately it’s a pretty easy fix.

The Problem: You have a CSS based drop-down menu in your navigation and a flash element near it the menus may get “hidden” behind the flash object.

The Solution: Set the z-index of the div holding the flash to 1 and the z-index of the div holding the nav to 2.

In the flash element:

Look for the flash <object> tag and add the following code:

<param name="wmode" value="transparent">

You’ll want to insert this code right below the <param name=”quality” value=”high”> tag and include the code wmode=”transparent” in the flash <embed> tag.

Want automatic updates? Subscribe to our RSS feed or
Get Email Updates sent directly to your inbox!
  • Print This

    • Scott Ellis is the founder of VSELLIS.com and is a web producer for GeekBeat.tv.

    There Are 52 Responses So Far »

    • http://www.winc.it Luanigio

      Great!
      I go immediately to try these tips.
      Thank you and happy new year.

      Ciao.

    • http://www.velvetblues.com Shirley

      Hmmm. I don’t think that this solution is cross-browser compatible. I played around with a similar thing this past fall and had a problem with ‘Safari 2′. Surprisingly, it worked on every single browser (including IE flavors) as well as Safari 3, but not Safari 2.

    • http://www.velvetblues.com Shirley

      Yeh, here’s my article that I published on the subject back in September…

      http://www.velvetblues.com/web-development-blog/safari-and-flash-dont-play-well-together/

      I couldn’t find a solution.

    • Pingback: WordCast 41: Cats in boxes- best blog theme ever - Dave Moyer

    • http://www.velvetblues.com Shirley

      No follow up? (Sorry for the persistence. :-) )

    • http://pixopoint.com/ Ryan

      @Shirley I wasn’t aware that Safari 2 couldn’t handle the overlays. I don’t think it’s a huge issue though as Safari 2 is such a rarity these days.

    • http://www.sudeep.net.np Sudeep Tamakar

      Thanks for the useful menu article. I am searching for the same solutions. Thanks anyway.

    • mindless

      Is it just me and my bad luck? Ive found this solution in other places and it doesnt work for me… plus now my nav bar is all screwed up in IE. has anyone else had this not work? is there another solution somewhere? Its driving me crazy.

    • http://seosumo.com sergio zambrano

      Shouldn’t z-indexed elements have to be absolutely, fixed or relatively positioned and into the same parent in order to them elements interact with each other?

      If your elements are under different parents, the parents will determine the z-index that will determine the stacking.

    • http://www.pupr.edu Jimmy

      Thank you so much!, super straight forward and perfectly helpful for my situation.

      Thank you again Great JOB!

    • Pingback: WordCast 41: Cats in boxes- best blog theme ever | WordCast

    • http://www.mex.com.au Jim

      Thanks so much!! this is exactly what i needed and fixed my problem perfectly!!

    • phani

      hello sir,

      i have already done all the things that were mentioned here..but still the flash is hiding my navbar in safari 4 browser only,…its working fine in ie8, ie7, mozilla 3.5 latest,,,and chrome,.,but am not able to find any solution for safari 4…

      really appreciate ur help
      thank u

    • http://www.love-rugs.com Ryan

      I’ve tried this and it doesn’t work for me in IE8 or Firefox 3.5 – it works ok in IE7, not sure why!

    • mani

      i am having the same problem that my drop down menus are hiding the featured content slider…but i am unable to understand the solution given above …coz i am really a starter in wp …can any body plz explain a bit for me ….plzz

    • Dont wokr

      Doesnt work in Firefox 3.5 or IE8

      • http://riparchery.com monica

        Thanks, I found your article after searching through several others-it worked.

    • Allan

      thanks for this tip, work like a charm :)

    • Pingback: Weekly Tip: Adding Dropdown Menus

    • kazal

      In safari browser it dose not work. Its amazing. Can any one help !!!!!!!!!!!!

    • http://www.bseindia.com Preet Webmaster

      Hi guys I tried it out but was having same issue but still couldn’t fix it. Then thought of making the wmode to opaque and it worked out.Its working fully on my website!!

      Anyways thanks for the post!!

    • http://dubstepdownloads.com Chris

      thankyou so much for this fix. was doing my head in and this worked a treat :)

    • http://www.ourston.com Laura

      Seems to be hiding in Safari 5. Yarg.

    • Chris Jones

      http://www.thesalesdrivers.com/beta/index.php
      followed the instructions and does not work on IE7 or IE8

    • Chris Jones

      never mind, found the answer here and it works.
      http://www.projectseven.com/support/answers.asp?id=127

      • http://www.sixteeneighteen.co.uk Lyndsey

        This link worked a treat with my problem, I’ve got a Youtube video that was causing problems on my WordPress site. Cheers Chris

    • http://southcoastcanvas.co.uk wayne

      The post above from Chris uses the similar code but makes the flash movie opaque, this still left the flash movie overlaying the css. I found that all I needed to do was ajust the flash code and didn’t need to worry about altering the z-index values of any css script.

      I added within the tag, and I also added wmode=”transparent” into the embed code, the final code looked something like:

    • http://southcoastcanvas.co.uk wayne

      I entered elements of code in my post above which don’t seem to have appeared, if they appear at a later date afer moderation I apologise, basically follow Chris Jones’s link above but where the code tells you to enter “opaque” both in the param and embed code, you will need to enter “transparent” instead of “opaque” and this should work.

    • Dean

      AWESOME! Thank you… after frikkin years this simple guide did it! AWESOME I SAY AWESOME!

      Have a nice day, missing you alright already!

    • paul

      Thank you! This works great. I kept trying to solve it with just the z-index, but didn’t know it needed those additions to the embed code. Thanks.

    • http://www.tatilyerlerim.biz Tatil Yerleri

      Thanks for the useful menu article. I am searching for the same solutions. Thanks anyway…

    • http://www.spiritchi.com Vimal

      Thank you very much. It is working.. Very straight forward method.

    • http://cruxfinder.com Madhur

      Thanks a ton. this works perfectly… !!!

    • http://www.daigioca.com/ Lester

      it work but when i play flash games key up and down make scroll page in ie8.

    • Garth

      Thnx wayne !!!! the wmode=”transparent” works in my case

    • Jon

      Anyone having these same issues with embedded mp4′s? Only IE is giving issues, 8 is the only version I really need it to work in. When I set the wmode to transparent, my drop down with show up on top of the mp4 correctly. However, the quicktime controls on the bottom of the video will not show up. If I change the wmode to opaque, the controls show up, but the video is back on top of my dropdown menu. Any help would be awesome, Thanks!

    • http://www.yourwpdiva.com urwordpressdiva

      Thanks for this – I was able to save the day with a client by using your information to fix this very problem on a site!

    • http://www.unitedbmwonline.com Steve

      Scott,

      Thank you for this extremely valuable code snippet. Implemented on our BMW website and solves the issue of menus popping up behind the flash video.

    • http://RockmanEntertainment.com bernie

      I’m having a similar problem but only with ie8. My dropdown hides behind my video player. I’ve added z-index of 10000 to my css dropdown and I’ve included

      param name=”wmode” value=”transparent”

      inside my and still with no luck. Also tried including a z-index=1 inside my iframe but nothing happens. Still same problem

      Can anyone help. I’m still kind of new at css and don’t know what else I can do. IE gives me more headaches than its worth. Anyone?

    • http://www.asrd.info elistae

      wmode=”transparent” fixed it
      thanks!

    • Paige

      Thank you, thank you, thank you! Your solution is so simple and straightforward, and worked perfectly! I checked it across Firefox, Chrome, Safari, and IE browsers and it worked. Thank you so much!

    • maurizio

      It works for flash files, NOT for PDF files. CSS dropmenu will be always be hidden by PSD plug-in.

      • Linda

        Hello maurizio,
        I face the sampe problem with the pdf files. Have you found a solution for that ?

    • http://horse-head-mask.com Ravi T.

      Wish I would have found this a month ago. I abandoned my whole site design because this stupid problem and switched to a WordPress blog. I’ll save this one for next time. Thanks.

    • http://www.karaza.com Ken

      Had this problem with one of my sites and decided to search see if I could find a solution online, and found it here. I thought I would have to move my videos down on the page. This worked perfect. Thanks

    • Geraldine

      Thank you!!!!!!!!!!!!!!!!

    • Geraldine

      Doesn’t seem to work in safari… oh well. let me know if anyone has a fix for safari…

      • xy

        So it works with safari: embed wmode=”transparent” src=”video.swf” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash”

        Important is the wmode=”transparent” option in the embed tag.

    • http://thefrenchgourmet.net Meagan Byer

      In what part of wordpress would you edit this code? Thank you!!

      • basha

        ya changing the z-index is fine but, the thing is I have embedded an iframe inside the html page. so when ever i click on the videos, the video is playing inside the frame and mean time if I try to navigate to other video which is in drop down list its hiding behind that video.please help me in this.

    • Anand

      Thanks for the post, i could solve it..great help and article indeed!!

    • http://findspage.com sabeel

      Thanks very very much, I was in a big problem with this, thank you once again for this information.

    • Anna

      this was fantastic advice! Thank you, fixed my problem so easily.

    • Virender

      Thanks A lot for fixing the problem. Thankyou vermuch Scott

    • Vijay

      This is not working with WMV file. Please help in this case.
      Thanks in advance.