css - 下拉菜单显示在 youtube 视频的后面

Question

我的代码中存在可见性问题。我有一个下拉菜单，它会在 youtube 视频上下拉。发生的情况是菜单显示在 youtube 视频的后面，而不是显示在前面。请帮忙。谢谢

这是我的菜单代码，

<div style="margin-top:-60px;padding-bottom:20px;position:relative;overflow:visible;">

<div class='cssmenu'>
<ul>
   <li><a href='http://financeyoga.com/starthere'><span>Start Here</span></a>
      <ul>
         <li><a href='http://financeyoga.com/starthere'><span>New To The Site? Start Here</span></a></li>
         <li class='active '><a href='index.html'><span>Home</span></a></li>
         <li><a href='http://financeyoga.com/about'><span>About</span></a></li>
         <li><a href='http://financeyoga.com/Contact'><span>Contact</span></a></li>
         <li><a href='http://financeyoga.com/hello-world/'><span>What Is Finance Yoga?</span></a></li>
      </ul>
   </li>
   <li><a href='http://financeyoga.com/SaveMoney'><span>Save Money</span></a>
      <ul>
         <li><a href='http://financeyoga.com/SaveMoney'><span>Ways To Save</span></a></li>
         <li><a href='http://financeyoga.com/category/ways-to-save/moving/'><span>Moving</span></a></li>
         <li><a href='http://financeyoga.com/category/ways-to-save/coupons-and-cash-back/'><span>Coupons & Cash Back</span></a></li>
         <li><a href='http://financeyoga.com/category/ways-to-save/moving/'><span>Moving</span></a></li>
      </ul>
   </li>
   <li><a href='http://financeyoga.com/makemoney '><span>Make Money</span></a>
      <ul>
         <li><a href='http://financeyoga.com/category/make-extra-money/series-make-quick-money/'><span>Series - Make Quick Money</span></a></li>
         <li><a href='http://financeyoga.com/how-to-make-money-with-a-blog/'><span>Make Money Blogging</span></a></li>
      </ul>
   </li>
   <li><a href='http://financeyoga.com/onlinebanking'><span>Online Banking</span></a>
      <ul>
         <li><a href='http://financeyoga.com/onlinebanking'><span>Online Banking</span></a></li>
         <li><a href='http://financeyoga.com/category/checking-accounts/'><span>Best Checking Accounts</span></a></li>
         <li><a href='http://financeyoga.com/onlinebanking'><span>Online Banking</span></a></li>
         <li><a href='#'><span>Finance Tools</span></a></li>
      </ul>
   </li>
   <li><a href='http://financeyoga.com/AmazonDeals'><span>Amazon Deals</span></a>
      <ul>
         <li><a href='href="http://www.amazonwireless.com/b/684177011/?_encoding=UTF8&tag=finayoga-20&linkCode=ur2&camp=1789&creative=9325'><span>Amazon Wireless</span></a></li>
         <li><a href='http://www.amazon.com/b?_encoding=UTF8&site-redirect=&node=281407&tag=finayoga-20&linkCode=ur2&camp=1789&creative=9325'><span>Electronics</span></a></li>
         <li><a href='http://www.amazon.com/b?_encoding=UTF8&site-redirect=&node=4736&tag=finayoga-20&linkCode=ur2&camp=1789&creative=9325'><span>Books</span></a></li>
         <li><a href='href="https://rads.stackoverflow.com/amzn/click/com/B00067L6TQ" rel="nofollow noreferrer"http://www.amazon.com/b?_encoding=UTF8&site-redirect=&node=229534&tag=finayoga-20&linkCode=ur2&camp=1789&creative=9325'><span>Software</span></a></li>
         <li><a href='href="http://www.amazon.com/b?_encoding=UTF8&site-redirect=&node=195209011&tag=finayoga-20&linkCode=ur2&camp=1789&creative=9325'><span>Music</span></a></li>
         <li><a href='href="http://www.amazon.com/b?_encoding=UTF8&site-redirect=&node=51569011&tag=finayoga-20&linkCode=ur2&camp=1789&creative=9325'><span>Apparel & Accessories</span></a></li>
      </ul>
   </li>
</ul>
</div>

Answer 1

问题:您的导航中有一个基于 CSS 的下拉菜单，它附近有一个 flash 元素，菜单可能会“隐藏”在 flash 对象后面。

解决方案:将包含闪光灯的 div 的 z-index 设置为 1，将包含导航的 div 的 z-index 设置为 2。(z-index:1; 和 z-index:2;) 在 flash 元素中: 寻找闪光灯 <object>标记并添加以下代码:

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

您需要将此代码插入到 <param name=”quality” value=”high”> 的正下方标记并包含代码 wmode=”transparent”在闪光灯中<embed>标签。

试试吧，祝你好运!

原始文本位于 http://wphacks.com/fixing-css-drop-down-menus-hiding-behind-flash-objects/