CSS vertical menu traslucent instead of opaque

HTML & CSS
1

I am using these three CSS files as shown below and my vertical menu instead of being opaque is displayed as translucent i.e. the text behind the menu is displayed as well ,
i made a change to the page so that i could use the tables in css, instead of having them in the page with Tr and td’s but obviously i screwed something that is causing this
please refer to my image if i am not clear

Images
now

Before

I cannnot figure out why this is happening, any help would be wonderful

This is the vertical menu

/* Displays the side headings as a block*/


div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;
background:inherit}

 /*
Provides the color and background to subheadings like -d1 team
*/

ul.sidenav li a:hover {
	background: #d1cf9f url(sidenav_a.gif) no-repeat 5px 7px;
	border-top: 1px solid #1a4c76;
	
	ul.sidenav li span{	display: none; }
	
	
	ul.sidenav li a:hover span {
	display: inline;
	font-size: 0.8em;
	padding: 10px 0;
}

horizontal menu



/*
horizontal  menu coding 
 */
 
#nav {
	float: left;
	margin: 0 0 1em 0;
	padding: 0;
	list-style: none;
	
	
	}
#nav li {
	float: left; }
#nav li a {
	display:block;
	padding: 7px 23.9px;
	text-decoration: none;
	font-family:"Arial";
	color: white;
	border-right: 1px solid #ccc;
	border-bottom: 1px  dashed #ccc;
	font-size: 14px;
	background-color: #3f6fb7; }
	
	
}
#nav li a:hover {
	color: #3f6fb7;
	background-color: #d1cf9f; } 
	
	
#nav li.current-pageHorizontal a 
  {
    background:#d1cf9f;
    color: white;

   }	
/*
Print  menu coding 
*/

and a table CSS as



.ts-1 {
	border: none;
	height: 1186px;
	position: relative;
	text-align: left;
	width: 850px;
}

.ts-1-1 {
	border: none;
	height: 1px;
	left: 0px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 109px;
}

.ts-1-2 {
	border: none;
	height: 1px;
	left: 109px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 32px;
}

.ts-1-3 {
	border: none;
	height: 1px;
	left: 141px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 188px;
}

.ts-1-4 {
	border: none;
	height: 1px;
	left: 329px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 105px;
}

.ts-1-5 {
	border: none;
	height: 1px;
	left: 434px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 106px;
}

.ts-1-6 {
	border: none;
	height: 1px;
	left: 541px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 104px;
}

.ts-1-7 {
	border: none;
	height: 1px;
	left: 645px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 93px;
}

.ts-1-8 {
	border: none;
	height: 1px;
	left: 738px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 111px;
}

.ts-1-9 {
	border: none;
	height: 1px;
	left: 849px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 1px;
}

.ts-1-10 {
	border: none;
	height: 74px;
	left: 0px;
	padding: 0px;
	position: absolute;
	top: 1px;
	width: 844px;
}

.ts-1-11 {
	border: none;
	height: 74px;
	left: 849px;
	padding: 0px;
	position: absolute;
	top: 1px;
	width: 1px;
}

.ts-1-12 {
	background-color: #3f6fb7;
	border: none;
	height: 68px;
	left: 0px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	text-align: left;
	top: 82px;
	width: 110px;
}

.ts-1-13 {
	border: none;
	height: 81px;
	left: 108px;
	padding: 0px;
	position: absolute;
	top: 82px;
	width: 749px;
}

.ts-1-14 {
	background-color: #d1d09f;
	border: none;
	height: 1043px;
	left: 0px;
	padding: 0px;
	position: absolute;
	top: 143px;
	width: 109px;
}



.ts-1-15 {
	border: none;
	height: 1043px;
	left: 109px;
	padding: 0px;
	position: absolute;
	top: 143px;
	width: 32px;
}

.ts-1-16 {
	border: none;
	height: 1042px;
	left: 141px;
	padding: 0px;
	position: absolute;
	top: 144px;
	width: 709px;
}
2

Hi welcome to Sitepoint :slight_smile:

We’d really need to see a working demo with css and html to supply a full solution but it looks like a z-index issue to me.

Try adding the following css:


#nav{
position:relative;
z-index:99;
}

If that doesn’t resolve it you may need to add the same two rules to the main parent of that nav (i.e. the column itself).

If that doesn;t work we’ll need a link or at least a working example codewise to debug further :wink:

3

Thanks that worked it was the z index that was doin it