dropdown Archives — Stampede: the strategic design & technology company https://stampede-design.com/blog/tag/dropdown/ We are creating better worlds though thoughtful design and technology. Connect with us! Tue, 07 Apr 2026 09:07:17 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.5 https://stampede-design.com/wp-content/uploads/2024/02/cropped-Stampede-Favicon-old-32x32.png dropdown Archives — Stampede: the strategic design & technology company https://stampede-design.com/blog/tag/dropdown/ 32 32 Dropdown Menu Hiding Behind <iframe> https://stampede-design.com/blog/dropdown-menu-hidden-behind-iframe/ https://stampede-design.com/blog/dropdown-menu-hidden-behind-iframe/#comments Thu, 09 Jun 2011 17:32:31 +0000 https://stampede-design.com/blog/?p=1185 Chances are many who work with HTML and CSS came across this peculiarity of dropdown navigation stubbornly hiding itself behind an <iframe> element. Syazwan shares the workaround that might just save you hours of hair pullings.

The post Dropdown Menu Hiding Behind <iframe> appeared first on Stampede: the strategic design & technology company.

]]> Have you ever been caught by a dropdown navigation that stubbornly hides itself? Well, I found that while it normally works fine with Firefox, this problem usually occurs in Chrome and IE browser.

hidden dropdown

Dropdown menu comparison

As you can see in the image above, the dropdown on the left works while the one on the right is hidden behind <iframe>. The first thing that came into my mind when this problem occur is the z-index property. But after some debugging, I found that it has nothing to do with z-index since the error does not occur when I changed <iframe> to <img> element.

Is This Related to CSS?

The answer is no. So, how to fix? I am using a video embedding code from YouTube as example.


<iframe width="560" height="349" src="http://www.youtube.com/embed/rLVCjnEGrqQ" frameborder="0" allowfullscreen></iframe>

To fix the hidden dropdown issue, what you need is just a simple wmode=transparent code.

What Is WMODE?

WMODE is the Window Mode setting for Flash/SWF. Its possible values are “window”, “opaque” or “transparent”.

  • wmode=transparent: sets the Flash/SWF background to be transparent. This allows the background color or image of the content page behind to show through. This is required for overlay (such as jQuery Overlay) contents to show the Flash/SWF.
  • wmode=opaque: hides everything on the page behind Flash.
  • wmode=window: plays in its own rectangular window on a web page

How Do I Use WMODE?

What you need to do is simply add the “?wmode=transparent” at the end of src parameter and “wmode=transparent” at the end of <iframe>


<iframe width="560" height="349" src="http://www.youtube.com/embed/rLVCjnEGrqQ?wmode=transparent" frameborder="0" allowfullscreen wmode="transparent"></iframe>

Hope this helps!

The post Dropdown Menu Hiding Behind <iframe> appeared first on Stampede: the strategic design & technology company.

]]> https://stampede-design.com/blog/dropdown-menu-hidden-behind-iframe/feed/ 83