No replies
pmedow
Offline
newbie
Canada
Last seen: 3 years 1 week ago
Canada
Timezone: GMT-4
Joined: 2011-07-20
Posts: 1
Points: 3

Hi,
My search for a solution has reached far and wide and I finally decided to register and see if anyone on here can fix my problem. My issue is that, in FF and Chrome, the drop downs function exactly how I want them to when I hover my cursor over the words Home, Service, etc.
However, in IE9, with a gradient background, I can hover over a word, the sub menu appears, but as soon as I try to hover over the 2nd or 3rd sub menu (ie "We Deliver" or "KCI Team", the drop down menu disappears! I've noticed that if I keep my DOCTYPE as strict, it disappears after hovering over more than one row down. If I keep the DOCTYPE at loose, it disappears after hovering down more than TWO rows of sub menus.
Please bear in mind that this is my first attempt at CSS and I'm not a professional by any means. I've searched everywhere for a solution to this issue and cannot seem to find any workarounds. Any help would infinitely be appreciated. Yes, I know my style sheet should be in a separate document, and I haven't posted the entire document so I'm missing some closing tags at the bottom for BODY and HTML.

Note, I tried created a topic already but it won't appear anywhere for some reason, so apologies if this is a repost on my behalf.

Code is below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<style type="text/css">
 
#page-background 	{ 
					position:fixed;
					top:0;
					left:0;
					width:100%;
					height:100%;
					z-index:0;
					}
 
#content 			{
					position:relative;
					z-index:1;
					padding:0px;
					}
 
.cblue 				{
					color:#1d4266;
					font-family:Calibri;
					font-size:12px;
					}
 
.cmenu 				{
					color:#1d4266;
					font-family:Calibri;
					font-size:14px;
					font-weight:bold;
					}
 
.cblack 			{
					color:#000;
					font-family:Calibri;
					font-size:12px;
					}
 
.cgrey				{
					color:#ccc;
					font-family:Calibri;
					font-size:12px;
					}
 
.cwhite				{
					color:#fff;
					font-family:Calibri;
					text-decoration:none;
					}
 
.tdback				{
					background-image:url(footerbg1.png);
					}
 
div#footer			{
					position:absolute;
					bottom:0;
					left:0;
					width:100%;
					height:<length>;
					}
 
@media screen		{
					body>div#footer	{
									position:fixed;
									}
					}
 
* html body			{
					overflow:auto;
					} 
 
* html div#content	{
					height:100%; overflow:auto;
					}
#footer table tr .tdback 			{
									color:#e2e2e2;
									}
 
body 				{
					height:100%;
					width:900px;
					margin:100px auto;
					color:#000;
					}
 
a 					{
					color:#333;
					}
 
#nav 				{
					background:#fff;
					margin:0;
					padding:7px 6px 0;
					line-height:100%;
					}
 
#nav li 			{
					margin:0 5px;
					padding:0 0 5px;
					float:left;
					position:relative;
					list-style:none;
					}
/* main level link */
#nav a 				{
					color:#000;
					text-decoration:none;
					display:block;
					padding:8px 20px;
					margin:0;
					}
/* main level link hover */
#nav .current a, #nav li:hover > a 	{
									overflow:auto;
									color:#104B85;
									border-top:solid 0 #f8f8f8;
									}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a 	{
										background:none;
										border:none;
										color:#000;
										}
 
#nav ul a:hover 	{
					background:#104B85 !important;
					color:#E6E6E6 !important;
					}
/* level 2 list */
#nav ul 			{
					filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#cfcfcf');
					background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#cfcfcf));
					background:-moz-linear-gradient(top,#fff,#cfcfcf);
					display:none;
					margin:0;
					padding:0;
					width:150px;
					position:absolute;
					top:30px;
					left:0;
					border:solid 1px #b4b4b4;
					}
/* dropdown */
#nav li:hover > ul 	{
					display: block;
					}
 
#nav ul li 			{
					float:none;
					margin:0;
					padding:0;
					}
 
#nav ul a			{
					font-weight:normal;
					}
/* level 3+ list */
#nav ul ul			{
					left:121px;
					top:-1px;
					}
/* clearfix */
#nav:after			{
					content:".";
					display:block;
					clear:both;
					visibility:hidden;
					line-height:0;
					height:0;
					}
#nav 				{
					display:inline-block;
					}
 
html[xmlns] #nav 	{
					display:block;
					}
 
* html #nav			{
					height: 1%;
					}
 
#page-background 	{
					position:fixed;
					top:0;
					left:0;
					width:100%;
					height:100%;
					margin:auto;
					z-index:0;
					}
 
#content 			{
					position:relative;
					z-index:1;
					padding:0px;
					}
 
.tbl1				{
					width:800px;
					margin:auto;
					text-align:left;
					}
 
</style>
<html xmlns="http://www.w3.org/1999/html">
<head>
 
</head> 
<body>
	<div id="page-background">
    	<img src="bg01.png" width="100%" height="100%" alt="Smile"/>
    </div>
	<div id="content">
		<div class="tbl1">
			<table>
				<td width="650px"> 
					<ul id="nav" class="cmenu"> 
						<li class="current"><a href="http://www.webdesignerwall.com">Home</a></li> 
						<li><a href="http://www.ndesign-studio.com">Company</a> 
							<ul class="cblue"> 
								<li><a href="">We Deliver</a></li> 
								<li><a href="">The KCI Team</a></li>
					            <li><a href="">Company Profile</a></li>
							</ul> 
						</li> 
						<li><a href="#">Services</a> 
							<ul class="cblue"> 
								<li><a href="#">Solutions and Services</a></li> 
								<li><a href="#">Managed Services</a></li>
				   				<li><a href="#">SBS Plans</a></li> 
							</ul> 
						</li> 
						<li><a href="#">Careers</a>
				    		<ul class="cblue">
				        		<li><a href="">Current Openings</a></li>
				        	</ul>
				    	</li>
						<li><a href="#">Contact</a>
				    		<ul class="cblue">
				        		<li><a href="">Customer Service</a></li>
				            	<li><a href="">Technical Support</a></li>
				            	<li><a href="">Sales</a></li>
				        	</ul>
				    	</li>
					</ul>
				</td>
				<th width="250" scope="col">
                	<div align="center">
                    	<img src="logo1.png" width="220" height="80" />
                    </div>
                </th>
			</table>
		</div>