CSS z-index problem, urgent! ! ! _html/css_WEB-ITnose

CSS HTML video z-index

Above is a navigation, below is a video, and then there is a secondary menu in the navigation. When it is displayed, it is always displayed below the video. I am very distressed. Adding z-index to them has no effect. I guess I didn't add it. Please give me some advice. Thank you.


The effect after adding video



The effect without adding video

<div id="menu">			<ul>                <li><a class="hide one" href="#" style="width:70px;">Home</a></li>                <li class=""><a class="hide" href="#" style="width:100px;">Faculty</a></li>                <li class=""><a class="hide two" href="#" style="width:100px;">Information</a></li>                <li><a class="hide" href="#" style="width:100px;">Program</a>                              </li>                <li><a class="hide" href="#" style="width:150px;">Live Case Sites</a></li>                <li><a class="hide two" href="#" style="width:100px;">Submissions</a></li>                <li><a class="hide two" href="#" style="width:100px;">Exhibition</a></li>                <li><a class="hide one" href="#" style="width:60px;">China</a></li>                <li class=""><a class="hide" href="#" style="width:120px;">History Review</a>                <ul class="nav_l">                    <li><a href="#" target="_blank">CIT2012</a></li>                    <li><a href="#" target="_blank">CIT2011</a></li>                    <li><a href="#" target="_blank">CIT2010</a></li>                    <li><a href="#" target="_blank">CIT2009</a></li>                    <li><a href="#" target="_blank">CIT2008</a></li>                    <li><a href="#" target="_blank">CIT2007</a></li>                </ul>                </li>            </ul>        </div><div class="mv" style="  text-align:center;">	 <!-- START OF THE PLAYER EMBEDDING TO COPY-PASTE -->				<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" height="273" width="943">				<param name="movie" value="./css/player-viral.swf">				<param name="allowfullscreen" value="true">				<param name="allowscriptaccess" value="always">				<param name="flashvars" value="file=http://www.citmd.com/CIT/2013/images/cit2013.mov&image=./images/cit_video.jpg">				<embed type="application/x-shockwave-flash" id="player" name="player" src="Home-CIT%20Conference%202013_files/player-viral.swf" allowscriptaccess="always" allowfullscreen="true" flashvars="file=http://www.citmd.com/CIT/2013/images/cit2013.mov&image=./images/cit_video.jpg" height="273" width="964">			</object>			<!-- END OF THE PLAYER EMBEDDING -->        </div>

#menu { width:943px; height:38px; margin:0 auto; clear:both; position:relative; background:#000;}#menu ul { list-style: none; margin: 0px; padding: 0px; width:943px; }#menu ul li { float:left; background:url(../images/line.png) no-repeat right; height:38px;}#menu ul li a { display:block; width:95px; height:38px; line-height:38px; text-align:center; font-size:13px; font-weight:bold;}#menu ul li a#current {  font-weight:bold; color:#fff;}#menu ul li img {_margin:12px 0; _vertical-align: middle;}#menu ul li a:hover { color:#d26105;}#menu ul li ul { display:none; position:absolute; width:167px; border-left:none; margin-right:20px; background:#e1ecf8; filter:alpha(Opacity=90); Opacity:0.9;}#menu ul li ul li { float:none; width:167px; margin:0; border-bottom:1px dashed #fff; background:none;}#menu ul li ul li a { background:none; width:167px; color:#575757; font-size:12px;}#menu ul li ul li a:hover { color:#000;}#menu ul li:hover ul { display:block;}#menu ul li.sfhover ul { display:block;}.nav_l { right:-20px;}*html .nav_l { right:-21px;}

Reply to discussion (solution)

Why doesn’t anyone help me solve it? ? ? Please help me.

Add an attribute to the flash

<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" height="273" width="943">                <param name="movie" value="./css/player-viral.swf">                <param name="allowfullscreen" value="true">                <param name="allowscriptaccess" value="always">                <param name="flashvars" value="file=http://www.citmd.com/CIT/2013/images/cit2013.mov&image=./images/cit_video.jpg">                <embed type="application/x-shockwave-flash" id="player" name="player" src="Home-CIT%20Conference%202013_files/player-viral.swf" allowscriptaccess="always" allowfullscreen="true" flashvars="file=http://www.citmd.com/CIT/2013/images/cit2013.mov&image=./images/cit_video.jpg" height="273" width="964">            </object>

Change it to:

<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" height="273" width="943">                <param name="movie" value="./css/player-viral.swf">                <param name="allowfullscreen" value="true">                <param name="wmode" value="transparent">                 <param name="allowscriptaccess" value="always">                <param name="flashvars" value="file=http://www.citmd.com/CIT/2013/images/cit2013.mov&image=./images/cit_video.jpg">                <embed  wmode="transparent"  type="application/x-shockwave-flash" id="player" name="player" src="Home-CIT%20Conference%202013_files/player-viral.swf" allowscriptaccess="always" allowfullscreen="true" flashvars="file=http://www.citmd.com/CIT/2013/images/cit2013.mov&image=./images/cit_video.jpg" height="273" width="964">            </object>

Actually, I just add
and an attribute wmode="transparent"

Add an attribute to the flash one
XML/HTML code?1234567

XML/HTML code?1234567