Menus cannot be displayed

[sannymak]

Hi,

Am new to CSS and having some problems displaying the sub-menus in my design. My code is as follows:
<div id="topcontainer"> // this contains the logo and navbar
<div id="navcontainer"> // this contains the menu
<div id="nav">
<ul class="menu">
::::::::
::::::::
</ul>
</div>
</div>
</div>
<div id="videocontainer"></div> // this contains the image

Now the problem here is that the dropdowns are hidden behind the div"videoconatiner" and even if the remove the bg color for videocontainer they are not clickabe and disappear on rollover

Can't figure out why that is happening??

[drhowarddrfine]

You ask what's wrong with the CSS yet you show the HTML. Without the complete markup or a link, we can only guess.

[sannymak]

sorry abt that, here goes:

#navcontainer{
position: relative;
width: 968px;
height: 33px;
padding: 0;
margin: 0 0 10px 0;
}

#nav {height:33px; position:relative; z-index:100; top:-2px; left:2px;}

.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;}

.menu li.top {display:block; float:left; position:relative;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu li.top a.top_link {display:block; float:left; height:33px;}
.menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px; font-weight:bold;} /* move the link text off screen */

.menu li.p1 {width:85px; background:url(../images/...gif) no-repeat;;}
.menu li.p2 {width:125px; background:url(../images/...gif) no-repeat;;}
.menu li.p3 {width:121px; background:url(../images/...gif) no-repeat;;}
.menu li.p4 {width:115px; background:url(../images/...gif) no-repeat;;}
.menu li.p5 {width:113px; background:url(../images/...gif) no-repeat;;}
.menu li.p6 {width:116px; background:url(../images/...gif) no-repeat;;}
.menu li.p7 {width:139px; background:url(../images/...gif) no-repeat;;}
.menu li.p8 {width:149px; background:url(../images/...gif) no-repeat;;}

.menu li a#home {width:85px; background:url(../images/...gif) no-repeat;}
.menu li a#company {width:125px; background:url(../images/homecompany_1.gif) no-repeat;}
.menu li a#solutions {width:121px; background:url(../images/...gif) no-repeat;}
.menu li a#services {width:115px; background:url(../images/...gif) no-repeat;}
.menu li a#clients {width:113px; background:url(../images/...gif) no-repeat;}
.menu li a#careers {width:116px; background:url(../images/...gif) no-repeat;}
.menu li a#contact {width:139px; background:url(../images/...gif) no-repeat;}
.menu li a#online {width:149px; background:url(../images/...gif) no-repeat;}

.menu a:hover {visibility:visible;} .menu li:hover { position:relative; z-index:200;}


.menu li a#home:hover, .menu li:hover a#home,
.menu li a#company:hover, .menu li:hover a#company,
.menu li a#solutions:hover, .menu li:hover a#solutions,
.menu li a#services:hover, .menu li:hover a#services,
.menu li a#clients:hover, .menu li:hover a#clients,
.menu li a#careers:hover, .menu li:hover a#careers,
.menu li a#contact:hover, .menu li:hover a#contact,
.menu li a#online:hover, .menu li:hover a#online {background:transparent;}

.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

.menu :hover ul.sub {left:0; top:33px; background:url(../images/submenusactive.gif) no-repeat; padding:0; width:165px; height:21px;}
.menu :hover ul.sub li {display:block; height:21px; position:relative; float:left; width:90px;}
.menu :hover ul.sub li a {display:block; font-size:11px; font-weight:bold; height:21px; width:165px; line-height:20px; text-indent:5px; color:#666666; text-decoration:none;background:url(../images/submenusactive.gif) no-repeat;}
.menu :hover ul.sub li a:hover {background:url(multi_level-files/submenushover.gif) no-repeat; color:#fff;}


#videocontainer
{
background:#ffffff;
position:relative;
width:968px;
height:238px;
padding:0;
left:3px;
top:11px;
}

hope that helps.