obsolete DOCTYPE causes CSS dropdown menu to misbehave in Chrome/FF/Safari -- workaround?

Hi. I'm still dealing with an obsolete DOCTYPE problem, which causes my all-CSS dropdown menus to function incorrectly in Chrome/FF/Safari.

I think there must be a CSS workaround for this problem, but I can't seem to get it.

Details:

* I am stuck (unfortunately) with this obsolete DOCTYPE: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

*  If you open Firefox, Chrome, or Safari and view http://www.ebwebwork.com/ASCA/eWebHeadertest.html, you will see the problem: the third-level menu items display, even when you only hover over a first level menu item. The client finds this unacceptable.

The problem is caused by the HTML 4 DOCTYPE. I use this cross user-agent statement:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

to make the menu display correctly in MSIE.

Is there a similar user agent statement, or other trick, I can use to fool Firefox et. al. into diplaying the menu correctly? Or is there a CSS fix that I have not thought of?

Thank you for taking a look at this problem. The client is getting worried and impatient, and I have been unable to find a solution.

Eric
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=9" />

<title>ASCA Navigation Menu Test</title>

<style type="text/css">

/*MENU*/
.menu {
width:auto;
height:42px;
position:relative;
z-index:100;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;

}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
height:42px;
}
.menu ul ul {
width:auto;
height:22px;
}
/* float the list to make it horizontal and a relative position so that you can control the dropdown menu position */
.menu li {
float:left;
width:auto;
position:relative;
height:42px;
}
/* style the links for the top level */
.menu ul a,.menu ul a:visited {
display:block;
color:#333;
width:auto;
height:42px;
background:#ddd url("https://members.ascassociation.org/eweb/images/ASC/mainsite/silverNavBackground.png") right top no-repeat;
padding:0;
line-height:42px;
font-weight:bold;
}

/* style the red, top level navigation */
a:link.ascaconnectred	{
background:#ddd url("https://members.ascassociation.org/eweb/images/ASC/mainsite/redNavBackground.png") right top no-repeat !important;
color:#fff !important;
}

a:hover.ascaconnectred {
background:#ddd url("https://members.ascassociation.org/eweb/images/ASC/mainsite/blueNavBackground.png") right top no-repeat !important;
color:#fff !important;
}

/* style the second level background */
.menu ul ul a,.menu ul ul a:visited {
color:#fff;
background-color:#17436f;
height:22px;
line-height:22px;
}
/* style the second level hover */
.menu ul ul a:hover {
color:#fff;
background-color:#17436f;
height:22px;
line-height:22px;
}
.menu ul ul :hover > a {
color:#fff;
background-color:#17436f;
height:22px;
line-height:22px;
}

/* style the third level background */
.menu ul ul ul a,.menu ul ul ul a:visited {
color:#333;
background-color:#17436f;
height:22px;
line-height:22px;
}
/* style the third level hover */
.menu ul ul ul a:hover {
color:#fff;
background-color:#17436f;
height:22px;
line-height:22px;
}

/* position the third level flyout menu */
.menu ul ul ul {
left:209px;
top:-1px;
width:auto;
height:22px;
}

/* style the second level links */
.menu ul ul a:link,.menu ul ul a:visited {
background-color:#17436f;
color:#333;
line-height:22px;
padding:2px 10px;
width:189px;
font-weight:normal;
}

.menu :hover > a,.menu ul ul :hover > a {
color:#fff;
background:#17436f;
}

.menu ul li ul li, .menu ul ul li a  {
color:#333;
height:auto;
width:209px;
}
.menu ul ul a {
background:#961242;
color:white; 
height:22px;
color:white !important; 
padding:5px 10px;
font-weight:normal;
}
.menu ul ul li {
height:40px;
text-align:left;
}
.menu ul ul, .menu ul li ul {
color:#961242;
background: #103860 url(https://members.ascassociation.org/eweb/images/ASC/mainsite/dropdown_background.png) left bottom no-repeat;
margin:0;
height:auto;
width:209px;
border-bottom:2px solid #961242;
}

.menu ul li ul, .menu ul li ul {
margin-top:0px;
}
.menu ul ul:hover, .menu ul li ul a:hover {
background-color:#265583;
}

/* style hover for the top level */
.menu ul a:hover,.menu ul a:active {
display:block;
color:#fff;
width:auto;
height:42px;
background:#ddd url("https://members.ascassociation.org/eweb/images/ASC/mainsite/blueNavBackground.png") right top no-repeat;
padding:0;
line-height:42px;
}

/* hide the level 2 menus and give them position absolute so that they take up no room */
.menu ul ul {
visibility:hidden !important;
position:absolute;
height:0;
top:42px;
left:0;
width:auto;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible !important;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden !important;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible !important;}
</style>


</head>

<body>




<table id="head" cellpadding="10" cellspacing="0" border="0"><!-- head -->
<tr>

<td id="head1" width="805" align="left" valign="middle"><!-- head1 -->

<a href="http://members.ascassociation.org"><img src="https://members.ascassociation.org/eweb/images/ASC/mainsite/ascaLogo.png" width="370" height="57" alt="ASCA Connect Logo" class="border0" /></a>

</td><!-- /head1 -->

<td id="head2" width="200" align="right" valign="top"><!-- head2 -->

<ul>
<li><a href="#">Join</a> | </li>

<li><a href="#">Store</a> |</li>

<li><a href="#">Contact Us</a></li>

</ul>

</td><!-- /head2 -->


</tr></table><!-- /head -->


<table id="redline" cellpadding="0" cellspacing="0" border="0"><!-- redline -->
<tr><td>
<div class="lineac0937"></div>
</td></tr></table><!--/redline-->

<table id="menu" cellpadding="0" cellspacing="0" border="0"><!-- menu -->
<tr><td>

<!-- begin dropdown menus-->

<div class="menu">

<ul>
	<li><a href="http://www.ascaconnect.org/AboutUs/Mission/" style="width:103px;text-align:center;">About Us</a>

		<ul>
  		  	<li><a href="http://www.ascaconnect.org/AboutUs/Mission/">Mission</a></li>
			<li><a href="http://www.ascaconnect.org/AboutUs/Governance/">Governance</a></li>
		    <li><a href="http://www.ascaconnect.org/AboutUs/WhatisanASC/">What is an ASC? <img src="https://members.ascassociation.org/eweb/images/ASC/mainsite/whiteArrow.png" width="15" height="9" alt="Arrow points to level three menu items" class="border0" /></a>
    
		    	<ul><!--level 3-->
					<li><a href="http://www.ascaconnect.org/AboutUs/WhatisanASC/AboutASCs/">About ASCs</a></li>
					<li><a href="http://www.ascaconnect.org/AboutUs/WhatisanASC/History/">History</a></li>
				   	<li><a href="http://www.ascaconnect.org/AboutUs/WhatisanASC/SurgicalCareStories/">Surgical Care Stories</a></li>
				</ul>

	    </li>

		    <li><a href="http://www.ascaconnect.org/AboutUs/PressRoom/">Press Room</a></li>
		    <li><a href="http://www.ascaconnect.org/AboutUs/RelatedOrganizations/">Related Organizations <img src="https://members.ascassociation.org/eweb/images/ASC/mainsite/whiteArrow.png" width="15" height="9" alt="Arrow points to level three menu items" class="border0" /></a>
    
	        	<ul><!--level 3-->
					<li><a href="http://www.ascaconnect.org/AboutUs/RelatedOrganizations/AmbulatorySurgeryFoundation/">Ambulatory Surgery Foundation</a></li>
					<li><a href="http://www.ascaconnect.org/AboutUs/RelatedOrganizations/AdvancingSurgicalCareCampaign/">Advancing Surgical Care Campaign</a></li>
				   	<li><a href="http://www.ascaconnect.org/AboutUs/RelatedOrganizations/ASCQualityCollaboration/">ASC Quality Collaboration</a></li>
				   	<li><a href="http://www.ascaconnect.org/AboutUs/RelatedOrganizations/SafeInjectionPracticesCoalition/">Safe Injection Practices Coalition</a></li>
					<li><a href="http://www.ascaconnect.org/AboutUs/RelatedOrganizations/StateAssociations/">State Associations</a></li>
				   	<li><a href="http://www.ascaconnect.org/AboutUs/RelatedOrganizations/AccreditationOrganizations/">Accreditation Organizations</a></li>
		</ul>
    
		    </li>    
		</ul>

		</li>


		<li><a href="http://www.ascaconnect.org/Membership/" style="width:123px;text-align:center;">Membership</a>

				<ul>
				<li><a href="http://www.ascaconnect.org/Membership/MemberTypesBenefits/">Member Types &amp; Benefits <img src="https://members.ascassociation.org/eweb/images/ASC/mainsite/whiteArrow.png" width="15" height="9" alt="Arrow points to level three menu items" class="border0" /></a>
    
	        	<ul><!--level 3-->
					<li><a href="http://www.ascaconnect.org/Membership/MemberTypesBenefits/FacilityMembership/">Facility Membership</a></li>
					<li><a href="http://www.ascaconnect.org/Membership/MemberTypesBenefits/VendorMembership/">Vendor Membership</a></li>
				</ul>
    
    </li>
	<li><a href="http://www.ascaconnect.org/Membership/MemberServicesTeam/">Member Services Team</a></li>
   	<li><a href="http://www.ascaconnect.org/Directory/FindaMember/">Member Directory</a></li>
	<li><a href="http://www.ascaconnect.org/Membership/GetInvolved/">Get Involved</a></li>
	</ul>

</li>


<li><a href="http://www.ascaconnect.org/EducationEvents/" style="width:163px;text-align:center;">Education &amp; Events</a>

	<ul>
	<li><a href="http://www.ascaconnect.org/EducationEvents/EventCalendar/">Event Calendar</a></li>
	<li><a href="http://www.ascaconnect.org/EducationEvents/AnnualMeeting/">Annual Meeting</a></li>
   	<li><a href="http://www.ascaconnect.org/EducationEvents/ContinuingEducation/">Continuing Education <img src="https://members.ascassociation.org/eweb/images/ASC/mainsite/whiteArrow.png" width="15" height="9" alt="Arrow points to level three menu items" class="border0" /></a>
         <ul><!--level 3-->
	<li><a href="http://www.ascaconnect.org/EducationEvents/ContinuingEducation/CASC/">CASC</a></li>
		</ul>
    
    </li>
	<li><a href="http://www.ascaconnect.org/EducationEvents/CallforTopicsandSpeakers/">Call for Topics and Speakers</a></li>
    <li><a href="http://www.ascaconnect.org/EducationEvents/PastEvents/">Past Events</a></li>
	</ul>

</li>

<li><a href="http://www.ascaconnect.org/FederalRegulations/Overview/" style="width:162px;text-align:center;">Federal Regulations</a>

	<ul>
	<li><a href="http://www.ascaconnect.org/FederalRegulations/Overview/">Overview</a></li>
	<li><a href="http://www.ascaconnect.org/FederalRegulations/Medicare/">Medicare <img src="https://members.ascassociation.org/eweb/images/ASC/mainsite/whiteArrow.png" width="15" height="9" alt="Arrow points to level three menu items" class="border0" /></a>
    
    
	<ul>
	<li><a href="http://www.ascaconnect.org/FederalRegulations/Medicare/ConditionsforCoverage/">Conditions for Coverage</a></li>
	<li><a href="http://www.ascaconnect.org/FederalRegulations/Medicare/Payments/">Payments</a></li>
    
   	<li><a href="http://www.ascaconnect.org/FederalRegulations/Medicare/QualityReporting/">Quality Reporting</a></li>
	</ul>

    
    </li>
   	<li><a href="http://www.ascaconnect.org/FederalRegulations/HIPAA/">HIPAA</a></li>
	</ul>

</li>

<li><a href="http://www.ascaconnect.org/GovtAdvocacy/" style="width:183px;text-align:center;">Government Advocacy</a>

	<ul>
	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/GovernmentAffairsUpdate/">Government Affairs Update</a></li>
	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/Legislation/">Legislation <img src="https://members.ascassociation.org/eweb/images/ASC/mainsite/whiteArrow.png" width="15" height="9" alt="Arrow points to level three menu items" class="border0" /></a>
    
    <ul>
	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/Legislation/ASCQualityAccessAct/">ASC Quality &amp; Access Act of 2011</a></li>
   	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/Legislation/PolicyBriefs/">Policy Briefs</a></li>
	</ul>
    
    </li>
   	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/ASCPAC/">ASCPAC</a></li>
	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/TakeAction/">Take Action <img src="https://members.ascassociation.org/eweb/images/ASC/mainsite/whiteArrow.png" width="15" height="9" alt="Arrow points to level three menu items" class="border0" /></a>
    
    <ul>
	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/TakeAction/SendLetterstoCongress/">Send Letters to Congress</a></li>
   	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/TakeAction/BecomeanASCChampion/">Become an ASC Champion</a></li>
	</ul></li>
    <li><a href="http://www.ascaconnect.org/GovtAdvocacy/Grassroots/">Grass Roots</a></li>
    <li><a href="http://www.ascaconnect.org/GovtAdvocacy/StateAdvocacyCenter/">State Advocacy Center</a></li>
	</ul>

</li>

<li><a href="http://www.ascaconnect.org/ResourceCenter/" style="width:143px; text-align:center;">Resource Center</a>

	<ul>
	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForPhysiciansOwners/">For Physicians/Owners</a></li>
	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/">For Administrators/Operators <img src="https://members.ascassociation.org/eweb/images/ASC/mainsite/whiteArrow.png" width="15" height="9" alt="Arrow points to level three menu items" class="border0" /></a>
    
    <ul>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/DeliveryofPatientCare/">Delivery of Patient Care</a></li>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/Quality/">Quality</a></li>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/Benchmarking/">Benchmarking</a></li>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/FinancialBusinessDevelopment/">Financial Business Development</a></li>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/HumanResources/">Human Resources</a></li>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/CareerCenter/">Career Center</a></li>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/VendorBusinessDirectory/">Vendor Business Directory</a></li>

	</ul>
    
    </li>
   	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForStateAssociations/">For State Associations <img src="https://members.ascassociation.org/eweb/images/ASC/mainsite/whiteArrow.png" width="15" height="9" alt="Arrow points to level three menu items" class="border0" /></a>
    
    <ul>
  	<li><a href="http://www.ascaconnect.org/GovtAdvocacy/StateAdvocacyCenter/">State Advocacy Center</a></li>
	</ul>
    
    </li>
    
    
	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForVendors/">For Vendors <img src="https://members.ascassociation.org/eweb/images/ASC/mainsite/whiteArrow.png" width="15" height="9" alt="Arrow points to level three menu items" class="border0" /></a>
    
    <ul>
  	<li><a href="http://www.ascaconnect.org/ResourceCenter/ForVendors/AdvertisingSponsorships/">Advertising &amp; Sponsorships</a></li>
    <li><a href="http://www.ascaconnect.org/ResourceCenter/ForVendors/VendorBusinessDirectory/">Vendor Business Directory</a></li>
    <li><a href="http://www.ascaconnect.org/ResourceCenter/ForVendors/CareerCenter/">Career Center</a></li>
	</ul>
    </li>
    
    
    <li><a href="http://www.ascaconnect.org/ResourceCenter/ForPatients/">For Patients</a></li>
    <li><a href="http://www.ascaconnect.org/ResourceCenter/Publications/">Publications <img src="https://members.ascassociation.org/eweb/images/ASC/mainsite/whiteArrow.png" width="15" height="9" alt="Arrow points to level three menu items" class="border0" /></a>
    
    <ul>
    <li><a href="http://www.ascaconnect.org/ResourceCenter/Publications/ASCFocusMagazine/">ASC Focus Magazine</a></li>
    <li><a href="http://www.ascaconnect.org/ResourceCenter/Publications/Bookstore/">Bookstore</a></li>
    <li><a href="http://www.ascaconnect.org/Directory/FindaMember/">Member Directory</a></li>
    <li><a href="http://www.ascaconnect.org/ResourceCenter/ForAdministratorsOperators/VendorBusinessDirectory/">Vendor Business Directory</a></li>
	</ul>
    
    </li>
	</ul>



</li>

<li><a href="http://www.ascaconnect.org/asca/Home/" class="ascaconnectred" style="width:128px; text-align:center;">ASCA Connect</a></li>

</ul>

</div><!--/ dropdown menus-->

</td></tr></table><!--/menu-->

<table id="breadcrumbs" cellpadding="10" cellspacing="0" border="0"><!--breadcrumbs-->
<tr>
<td align="left">
<a href="#" class="breadcrumbBold">Home</a>
<img src="https://members.ascassociation.org/eweb/images/ASC/mainsite/breadcrumbPipe.png" width="2" height="9" alt="breadcrumb pipe" />
<a href="#">About Us</a>
<!--<img src="breadcrumbPipe.png" width="2" height="9" alt="breadcrumb pipe" />
<a href="#">Membership</a>
<img src="breadcrumbPipe.png" width="2" height="9" alt="breadcrumb pipe" />
<a href="#">Education &amp; Events</a>
<img src="breadcrumbPipe.png" width="2" height="9" alt="breadcrumb pipe" />
<a href="#">Federal Regulations</a>
<img src="breadcrumbPipe.png" width="2" height="9" alt="breadcrumb pipe" />
<a href="#">Federal Regulations</a>
<img src="breadcrumbPipe.png" width="2" height="9" alt="breadcrumb pipe" />
<a href="#">Government Advocacy</a>
<img src="breadcrumbPipe.png" width="2" height="9" alt="breadcrumb pipe" />
<a href="#">Resource Center</a>
<img src="breadcrumbPipe.png" width="2" height="9" alt="breadcrumb pipe" />
<a href="#">ASCA Connect</a>-->
</td></tr>

</table><!--/ breadcrumbs-->



</body>
</html>

Open in new window

LVL 3
Eric BourlandAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

NrisimhaCommented:

Replace at first this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

with this one:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Nrisimha
0
NrisimhaCommented:


It must work. But if you want exact metadata then for IE and Google Chrome then put these metadada, although I think that the first <!DOCTYPE ....> will work:

Replace:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

With these for IE and GOOgle Chrome:

<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">



good luck

nrisimha


0
NrisimhaCommented:


I saw that you have a faults in the CSS script.

So, instead of your old CSS style use this CSS style:


<style type="text/css">

/*MENU*/
.menu {
width:auto;
height:42px;
position:relative;
z-index:100;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}




/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
height:42px;
}

/* float the list to make it horizontal and a relative position so that you can control the dropdown menu position */
.menu li {
float:left;
width:auto;
position:relative;
height:42px;
}
/* style the links for the top level */
.menu ul a,.menu ul a:visited {
display:block;
color:#333;
width:auto;
height:42px;
background:#ddd url("https://members.ascassociation.org/eweb/images/ASC/mainsite/silverNavBackground.png") right top no-repeat;
padding:0;
line-height:42px;
font-weight:bold;
}

/* style the red, top level navigation */
a:link.ascaconnectred, a:visited.ascaconnectred	{
background:#ddd url("https://members.ascassociation.org/eweb/images/ASC/mainsite/redNavBackground.png") right top no-repeat !important;
color:#fff !important;
}

a:hover.ascaconnectred {
background:#ddd url("https://members.ascassociation.org/eweb/images/ASC/mainsite/blueNavBackground.png") right top no-repeat !important;
color:#fff !important;
}


/* style the second level background */
.menu ul ul a,.menu ul ul a:visited {
color:#fff;
background-color:#17436f;
height:22px;
line-height:22px;
text-align:left;
}

/* style the second level hover */
.menu ul ul a:hover {
color:#fff;
background-color:#17436f;
height:22px;
line-height:22px;
text-align:left;
}
.menu ul ul :hover > a {
color:#fff;
background-color:#17436f;
height:22px;
line-height:22px;
text-align:left;
}


/* style the third level background */
.menu ul ul ul a,.menu ul ul ul a:visited {
color:#333;
background-color:#17436f;
height:22px;
line-height:22px;
text-align:left;
}

/* style the third level hover */
.menu ul ul ul a:hover {
color:#fff;
background-color:#17436f;
height:22px;
line-height:22px;
text-align:left;
}

/* hide the second level menus and give them position absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:42px;
}

/* position the third level flyout menu */
.menu ul ul ul {
left:209px;
top:-1px;
}

/* position the third level flyout menu for a flyout from left */
.menu ul ul ul.left {
left:-209px;
}


/* style the second level links */
.menu ul ul a:link,.menu ul ul a:visited {
background-color:#17436f;
color:#333;
line-height:22px;
width:199px;
font-weight:normal;
padding-left:10px;
}

.menu :hover > a, .menu ul ul :hover > a, .menu ul ul ul :hover > a {
color:#fff;
background:#17436f;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}

/* keep the third level hidden when you hover on first level list OR link */
.menu ul li:hover ul ul{visibility:hidden;}


/* make the third level visible when you hover over second level list OR link */
.menu ul li:hover ul li:hover ul{ visibility:visible;}



.menu ul li ul li, .menu ul ul li a  {
color:#333;
height:auto;
width:209px;
}



.menu ul ul a {
background:#961242;
color:white; 
height:22px;
color:white !important; 
font-weight:normal;
}

.menu ul ul li {
height:40px;
}
.menu ul ul, .menu ul li ul {
color:#961242;
background: #103860 url(https://members.ascassociation.org/eweb/images/ASC/mainsite/dropdown_background.png) left bottom no-repeat;
margin:0;
height:auto;
width:209px;
border-bottom:2px solid #961242;
}

.menu ul li ul, .menu ul li ul {
margin-top:0px;
}


.menu ul ul:hover, .menu ul li ul a:hover {
background-color:#265583;
}

/* style hover for the top level */
.menu ul a:hover,.menu ul a:active {
display:block;
color:#fff;
width:auto;
height:42px;
background:#ddd url("https://members.ascassociation.org/eweb/images/ASC/mainsite/blueNavBackground.png") right top no-repeat;
padding:0;
line-height:42px;
}

</style>

Open in new window


Nrisimha
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eric BourlandAuthor Commented:
Nrisimha, this was the answer. Can you tell me, which CSS faults did you find? Thank you so much for your help. This problem was driving me crazy.

Eric
0
NrisimhaCommented:

Thanks to you also.

In fact, you have an incomplete CSS script. So, I was making an CSS forensic testing.

Very simple. Your page had bad menus. But, when you click on any link in this menu then appears new web page.

And what I have seen? This page has CORRECT menus !

So, I was looking for the CSS of this page and found it is file asca.css. I opened this CSS file and compared your bad CSS style menu code with this code that is working.

And I have found that one part of about 20-30 lines of code are not present in your CSS styles.

Then I add in HTML editor all this correct code and replace yours.

And I have checked my HTML page with new CSS styles in IE 8, Firefox 9, Safari 4 and Google Chrome 16 - and a menu with a new CSS styles worked perfectly in every of these browsers!

So, that's it. I am happy you are satisfied and thanks again and good luck.


best regards

Nrisimha
 
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.