asked on

How do I fix this drop down menu to go in front of this video?

I have a site here:

http://vicious-fishing.com/

If you select 'VICIOUS GEAR" on the top menu it goes behind the video in IE and FF.

I know that in the past these sorts of menus would not go in front of form fields or videos.

Is there now a way to do this in CSS?

/* === SIDE MENU =================================================================== */
#sidemenu {
	width: 200px;
	margin: 10px;
	}
 
#sidemenu li {
      list-style: none;
      margin-top: 3px;
      background: url(../images/nav_bg.gif) no-repeat;
}	
#sidemenu li a {
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 20px;
	text-decoration: none;
      font-size: 14px;
      font-weight: bold;
      background: url(../images/arrow.gif) left no-repeat;
      padding-left: 10px;
	}	
	
#sidemenu li a:link, #sidemenu li a:visited {
	color: #FFF;
	display: block;
	background: url(../images/arrow.gif) left no-repeat;
	padding: 0 0 0 15px;
	}
	
#sidemenu li a:hover {
	color: #FFFF00;
	background: url(../images/arrow_null.gif) left no-repeat;
	padding: 0 0 0 15px;
	}
 
 
/* === TOP MENU =================================================================== */
.top_menu {
  line-height: normal;
  z-index: 10;
  padding-left: 210px;
 
}
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
 
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li {
float:left;
position:relative;
z-index:100;
background: #000;
}
 
.menu li.last {
background: #000;
background: url(../images/navmenubg.jpg) left no-repeat;
}
 
.menu ul li ul li { 
padding: 7px; 
width:150px;
}
 
/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}
 
/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:12px;
padding:0;
color:#fff;
background:#000;
text-decoration:none;
margin:0;
text-align:left;
}
/* style the links hover */
.menu :hover{
color:red;
}
/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
 
 
 
/* ===== COMMON STYLES ==========================================================================*/
* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0; 
}
body, html {
	color: #000; 
	font-family: Verdana, Arial, Tahoma, sans-serif;
	background:#ae0a1d url(../images/bg.gif) repeat-x; 
	min-width:990px;  
	text-align: center; /*** Centers the design in old IE versions ***/
	height: 100%;
}
body {
	font-size: 70%;
}
 
a {
	color: #000099;
}
a:hover{
	color: #0000FF;
	text-decoration: none;
}
 
h1, h2, h3 {
	font-weight: bold;
	padding-bottom: 5px;
}
h1 {
	font-size: 2em;
      color: #a00000;
      font-family: Tahoma,Verdana, Arial, sans-serif;
 
}
h2 {
	font-size: 1.4em;
}
h3 {
	font-size: 1.3em;
}
h1 a, #header h2{
	color: #fff;
}
 
.ulist {padding-left:20px; font-size:12px;}
 
/* ===== TIPS STYLE ========================================================================== */
.expand {padding:0 0 5px 0; margin:0; text-transform:uppercase; font-weight:bold; font-size:10px; color:#336699;}
a.expand {text-transform:uppercase; font-weight:bold; font-size:10px; color:#336699; text-decoration:none;}
a.expand:hover {color:#a00000;}
 
/* ===== TOURNAMENT TEAM =================================================================== */
.wrapper {width:260px;}
.left-element {float:left; width:125px;}
.center-element {float:left; width:110px;}
.right-element {float:right; width:25px; text-align:center;} 
 
/* ===== PRE-LOAD IMAGES =================================================================== */
div#preloaded-images {position: absolute; overflow: hidden; left: -9999px; top: -9999px; height: 1px; width: 1px;}
 
/* ===== CONTAINER ========================================================================= */
.clear {clear: both;}
#mainContainer {width: 990px;	margin: 0 auto; /*** Centers the design ***/ min-height: 100%; background:#ae0a1d url(../images/bg_content.gif) repeat-y; /*** This is our faux columns ***/ text-align: left;}
* html #mainContainer {height: 100%;  /*** IE doesn't support min-height, but instead it handles height as min-height so we need to hack the height ***/}
 
/* ===== HEADER ========================================================================== */
#header {height: 80px; width: 100%; background: #101010 url(../images/bg_header.jpg) no-repeat center;}
#vlogo {position:absolute; z-index: 100;}
#nav {text-align:left; width:100%; height:56px; background: url(../images/bg_nav.gif) repeat-x;}
#search {padding-top: 17px; padding-left: 800px;}
#shadow {width:100%; height:43px; top:0px; left:0px; background: url(../images/top_shadow.jpg) no-repeat;}
 
/* ===== CONTENT AND COLUMNS ===========================================================*/
.outer {padding-left: 180px;}
* html .outer {padding-right: 120px; /* Normally this shouldn't be in this hack, it should be in .outer, but because of IE7 I had to */}
.inner {width: 800px; /*** This width is for non-IE browsers. Mozilla makes this necessary. Be sure to check your layout in different browsers if you changes this value. Especially IE7 seems to create a horisontal scroll if this value is set too large ***/ padding-bottom: 30px;}
* html .inner {width: 100%;}
.float-wrap {float: left; width: 680px; margin-left: -180px; /*** Same length as .outer padding-left but with negative value ***/}
* html .float-wrap {}
 
.splash {width: 470px; padding: 0px; margin: 0px;}
#content {float: right; width: 470px; background: #fff;}
* html #content {position: relative;  /*** IE needs this  ***/}
.contentWrap {width: 430px; padding: 20px;}
 
/* ===== CONTENT BOXES ============================================================== */
.box_news {
	width:170px;
	padding:0 0 14px 0;
	margin:20px auto;
      color: #000;
	background:url("../images/box_news_bot.gif") bottom left no-repeat;
}
.box_news p {
	margin:0;
	padding:25px 10px 3px 10px;
	background: #fff url("../images/box_news_top.gif") top left no-repeat;
	border-width:0;
}
.box_spotlight {
	width:170px;
      padding-bottom: 20px;
	margin:50px auto;
	background:url("../images/box_news_bot.gif") bottom left no-repeat;
}
.box_spotlight p {
	margin:0;
	padding-top: 22px;
      padding-left: 4px;
	background: #fff url("../images/box_spotlight_top.gif") top left no-repeat;
	border-width:0;
}
.box_team {
	width:285px;
	padding:0 0 20px 0;
	margin:0px auto;
	background:url("../images/box_team_bot.gif") bottom left no-repeat;
}
.box_team p {
	margin:0px;
	padding:25px 10px 10px 10px;
	background: #fff url("../images/box_team_top.gif") top left no-repeat;
	border-width:0;
}
.box_team_scroll {
      background: #fff url("../images/box_team_bg.gif") top left no-repeat;
      width:278px;
      height:110px; 
      padding-left:7px;
      overflow:auto;
      font-size:10px;
}
.vbanners {
      position: relative;
      text-align:left;
}
/*===== LEFT COLUMN =======================================================================*/
#left {
	float: left;
	width: 180px;
	padding: 0px;
}
	* html #left {
	position: relative;  /*** IE needs this  ***/
}
 
 
/*===== RIGHT COLUMN =======================================================================*/
#right {
	float: right; 
	width: 280px;
	padding: 0px;
}
* html #right {
	position: relative;  /*** IE needs this  ***/
	margin-right:-0px; /*** IE gets this margin. ***/
}
/*===== FOOTER ==============================================================================*/
#footer {
	width: 100%;
	height: 35px; /*** The drawback with this solution is that the height of the footer can't be flexible. If you add so much content to the footer that it extends 30px, you will get a vertical scrollbar and the content will overflow the footer if you don't set overflow to hidden ***/
	margin: 0 auto;
	margin-top: -35px; /*** By using a negative margin-top we now moves the footer up the same amount as the footer height to avoid vertical scrolling. Remember, if you use borders and padding on your footer you will have to calculate this in your negative margin-top value also. ***/
	text-align: center;
	background: #000 url(../images/bg_footer.gif);
}
.foot {
      font-weight: bold;
      color: #fff;
}
.foot a {
      text-decoration: none;
      color: #fff;
      text-transform: uppercase;
}
.foot a:hover {
      color: red;
}
 
/*===== FORM STYLES =========================================================================*/
#comments {width:400px; text-align:left;}
select {font-size: 13px; color: #4D6A4C; border: #4D6A4C 1px solid; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; background: #ffffff; padding-left: 5px;}
input.submit {text-transform:uppercase; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; font-size:11px; background-color:#a00; color:#fff; font-weight:bold; border: 2px solid; border-color:#003333;}
input.submit:hover {text-transform:uppercase; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; font-size:11px; background-color:red; color:#fff; font-weight:bold; border: 2px solid; border-color:#333333;}
.flat {font-size: 12px; color: #336699; border: #336699 1px solid; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; background: #ffffff; padding-left: 5px;}
input.submitsm {text-transform:uppercase; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; font-size:8px; background-color:#a00; color:#fff; font-weight:bold; border: 2px solid; border-color:#003333;}
input.submitsm:hover {text-transform:uppercase; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; font-size:8px; background-color:red; color:#fff; font-weight:bold; border: 2px solid; border-color:#333333;}
 
/* TABLE STYLES ***************************************************/
table.grid {border-collapse: collapse; border-spacing:0; border-color: #000; border-width: 1px; border-style: solid;}
table.grid th {white-space: nowrap; text-transform: uppercase; background:#4D6A4C; padding:4px; font-size: 12px; font-weight: bold; color: #ffffff; border-color: #7E9DB9; border-width: 1px; border-style: solid; padding: 4px;}
table.grid td {font-size: 10px; font-weight: normal; color: #000; border-color: #4D6A4C; border-width: 1px; border-style: solid; padding: 4px; }

Open in new window

myderrick

Note: Z-index only works on elements that have been positioned (eg position:absolute or relative;)!

So make sure the top menu has a higher z-value than the div with the video (if it has a set z-value)

Give it a z-index of say 9999

Awaiting feedback

MD

Donnie Walker

ASKER

where would I add that in the style sheet?

myderrick

The div for the drop -down (top menu). Don;t forget to add position: relative as well if it is not there...

eg

.top_menu {
line-height: normal;
position: relative;
z-index: 10;
padding-left: 210px;

}

Awaiting Feedback

MD

Donnie Walker

ASKER

I did this:

.top_menu {
line-height: normal;
position: relative;
z-index: 9999;
padding-left: 210px;
}

and the video still is on top.

ASKER CERTIFIED SOLUTION

myderrick

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Donnie Walker

ASKER

This is why you are DA MASTER! Thanks!