Solved

How to create a multi level drop down horizontal css list menu that will function in IE6 or less?

Posted on 2008-10-14
6
984 Views
Last Modified: 2013-12-08
My multi level drop down horizontal css list menus seem to work well in most of the browsers except IE6 and older.  The top level of the menu shows up and function as links for the top level list items that are links, but there are no drop downs from parent list items and therefore no links from their topics.  ie: items 1,5,6 function.  items 2,3,4 do not.  They have drop down list items containing the links.
THE CSS FILE:
 
 

#outside{

	border:1px solid #000000;

	background-color: #5E843A;

	}

	 ul, ol, dl {

              position: relative;  }

#navTop {

	height: 50px;

	width: 100%;

	border-top-width: 3px;

	border-bottom-width: 4px;

	border-top-style: solid;

	border-bottom-style: solid;

	border-top-color: #501e13;

	border-bottom-color: #501e13;

	position: absolute;

	left: 0px;

	top: 133px;

	background-color: #5E843A;

}	

#navigation-1 {

	margin:0px;

	list-style:none;

	width:869px;

	height:22px;

	font:normal 8pt verdana, arial, helvetica;

	position: absolute;

	left: 65px;

	top: 10px;

	background-color: #5E843A;

	padding-top: 1px;

	padding-right: 0;

	padding-bottom: 1px;

	padding-left: 0;

	z-index: 500;
 

}

#navigation-1 li {

	margin:0;

	padding:0;

	display:block;

	float:left;

	position:relative;

	width:130px;

}

#navigation-1 li a:link, #navigation-1 li a:visited {

	display:block;

	text-align:center;

	text-decoration:none;

	color:#ffffff;

	width:130px;

	height:13px;

	font-family: Arial, Verdana, sans-serif;

	font-size: 12px;

	font-weight: bold;

	background-color: #5E843A;

	padding-top: 4px;

	padding-right: 0;

	padding-bottom: 4px;

	padding-left: 0;

}

#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {

	display:block;

	text-align:center;

	text-decoration:none;

	color:#eefbe1;

	width:130px;

	height:13px;

	border-left:0px solid #ffffff;

	border-right:0px solid #ffffff;

	padding-top: 4px;

	padding-right: 0;

	padding-bottom: 4px;

	padding-left: 0;

	background-repeat: no-repeat;

}

#navigation-1 li ul.navigation-2 {

	margin:0;

	list-style:none;

	display:none;

	width:160px;

	position:absolute;

	top:21px;

	left:-1px;

	color: #FFFFFF;

	background-color: #89B85F;

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-weight: bold;

	border-top-width: 1px;

	border-right-width: 1px;

	border-bottom-width: 1px;

	border-left-width: 1px;

	border-top-style: none;

	border-right-style: none;

	border-bottom-style: dotted;

	border-left-style: solid;

	border-top-color: #FFFFFF;

	border-right-color: #FFFFFF;

	border-bottom-color: #FFFFFF;

	border-left-color: #FFFFFF;

	padding-top: 1px;

	padding-right: 1px;

	padding-bottom: 0;

	padding-left: 1px;

}

#navigation-1 li:hover ul.navigation-2 {

	display:block;

	color: #FFFFFF;

	background-color: #ABCC8C;

}

#navigation-1 li ul.navigation-2 li {

	width:160px;

	clear:left;

	

}

#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {

	clear:left;

	background:#89b85f;

	width:160px;

	border:none;

	border-bottom:1px dotted #ffffff;

	position:relative;

	z-index:1000;

	padding-top: 4px;

	padding-right: 0;

	padding-bottom: 4px;

	padding-left: 0;

	color: #FFFFFF;

}

#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {

	color:#000000;

	clear:left;

	background:#abcc8c;

	width:160px;

	border:none;

	border-bottom:1px dotted #ffffff;

	position:relative;

	z-index:1000;

	padding-top: 4px;

	padding-right: 0;

	padding-bottom: 4px;

	padding-left: 0;

}

#navigation-1 li ul.navigation-2 li ul.navigation-3 {

	display:none;

	margin:0;

	padding:0;

	list-style:none;

	position:absolute;

	left:145px;

	top:-2px;

	padding:1px 1px 0 1px;

	border:0px solid #000000;

	border-left:0px solid #000000;

	background:#89b85f;

	z-index:900;

}

#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {

	display:block;

}

#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {

	background:#000000;

	color: #FFFFFF;

}

#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, 
 

#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {

	background:#666666;

}

#navigation-1 li ul.navigation-2 li a span {

	position:absolute;

	top:0;

	left:132px;

	font-size:12pt;

	color:#fe676f;

}

#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {

	position:absolute;

	top:0;

	left:132px;

	font-size:12pt;

	color:#ffffff;

}

    

#navBottom {

	height: 20px;

	width: 100%;

	position: absolute;

	left: 0px;

	bottom: 40px;

	text-align: center;

}
 

.navBottom {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 10px;

	color: #000000;

	text-decoration: none;

	z-index: 150;

}

.navBottom a:link {

	color: #006600;

	text-decoration: none;

	font-size: 10px;

}

.navBottom a:visited {

	color: #006600;

	text-decoration: none;

}

.navBottom a:hover {

	color: #000000;

	text-decoration: none;

	font-weight: bold;

	padding-right: -1px;

	

}

.navBottom a:active {

	color: #000099;

	text-decoration: none;

}
 

.navBottomOn {

	color: #00CC00;

	background-color: #e2f3d3;

	font-weight: bold;

}
 
 
 

THE HTML FILE:
 

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Untitled Document</title>

<link href="css/sampleTester.css" rel="stylesheet" type="text/css" media="all" />

</head>
 

<body>

<!--Begining of top navigation--><div id="navTop">

      <div ul id="navigation-1">

        <li><a href="index.php" title="A home with space that counts. " target="_self" >Home</a>

          <!--<ul class="navigation-2">

         <li><a href="#" title="sample" target="_self" >sample</a></li>

         <li><a href="#" title="sample" target="_self" >sample</a></li>

         <li><a href="#" title="sample" target="_self" >sample</a></li>

      </ul>-->

        </li>

     <li><a href="#" title="Project information" target="_self" >The Project</a>

       <ul class="navigation-2">

         <li><a href="about_the_project.htm" title="About the project" target="_self" >About The Project</a></li>

           <li><a href="The_professionals_involved.htm" title="Built by professonals" target="_self" >Project Professionals</a></li>

           

           <li><a href="condo_prices.htm" title="Pricing and Monthly Strata Fees" target="_self" >Pricing</a></li>

           <li><a href="disclosure.pdf" title="Disclosure Statement, PDF format- Acrobat Reader required." target="_self" >Disclosure Statement (PDF)</a></li>

       </ul>

     </li>

     <li><a href="#" title="Floorplans" target="_self" >The Plans</a>

      <ul class="navigation-2">

         <li><a href="2nd_floor_ plans.htm" title="Second Floor floorplans" target="_self" >2nd Floor</a></li>

         <li><a href="3rd_floor_plans.htm" title="Third Floor floorplans" target="_self" >3rd Floor</a></li>

         <li><a href="4th_floor_plans.htm" title="Fourth Floor floorplans" target="_self" >4th Floor</a></li>

      </ul>

       </li>

     <li><a href="#" title="The Amenities That Make Up THESE Condominiums." target="_self" >Amenities</a>

       <ul class="navigation-2">

         <li><a href="amenities_features.htm" title="Features" target="_self" >The Features</a></li>

           <li><a href="amenities_color-schemes.htm" title="Colour Schemes" target="_self" >The Colour Schemes</a></li>

           <li><a href="neighborhood.htm" title="What's In The Neighborhood?" target="_self" >The Neighborhood</a></li>

       </ul>

     </li>

     <li><a href="progress.htm" title="Progress Photos Albums" target="_self" >Progress Photos</a>

       <!--<ul class="navigation-2">

         <li><a href="#" title="sample" target="_self" >sample</a></li>

         <li><a href="#" title="sample" target="_self" >sample</a></li>

         <li><a href="#" title="sample" target="_self" >sample</a></li>

      </ul>-->

       </li>

     <li><a href="contact_and_map_directions.htm" title="Contact Us and Find Directions" target="_self" >Contact/Location</a>

       <!--<ul class="navigation-2">

         <li><a href="#" title="sample" target="_self" >sample</a></li>

         <li><a href="#" title="sample" target="_self" >sample</a></li>

         <li><a href="#" title="sample" target="_self" >sample</a></li>

      </ul>-->

       </li>

  </ul>

      </div>

    </div>

 <!--End of Top Navigation-->

</body>

</html>

Open in new window

0
Comment
Question by:jhindle
  • 2
  • 2
6 Comments
 
LVL 42

Accepted Solution

by:
David S. earned 125 total points
ID: 22716311
IE(4 through 6)/Win only natively support :hover on <a> elements. IE7 supports it on more elements like other modern browsers.
Two ways to simulate :hover in IE5-6/Win:
http://www.xs4all.nl/~peterned/csshover.html
http://www.htmldog.com/articles/suckerfish/
0
 
LVL 1

Assisted Solution

by:downtap
downtap earned 125 total points
ID: 22716417
Here's a link to one of my favorite sites, which has a great cross browser horizontal drop-down menu for download. This can get pretty complicated, so my suggestion would be to take something like I have linked below, and modify it for your own purposes. This particular one works in IE5.5, IE6, IE7, Firefox, Opera, Safari(PC), Google Chrome, Netscape 9 and Mac Firefox 1.5 and Safari though not Mac IE5.x.

http://www.cssplay.co.uk/menus/final_drop.html
0
 
LVL 42

Expert Comment

by:David S.
ID: 22716433
That one and many of the other menus at cssplay.co.uk use a nasty hack to make them work in IE5-6/Win. They only validate because they use conditional comments to only show the invalid nesting to IE5-6/Win. They also use <table>s that would otherwise be unnecessary and are semantically incorrect.
0
 
LVL 1

Expert Comment

by:downtap
ID: 22716460
Yeah, unfortunately it does have to use that table hack to get it to display correctly. However, as long as you're above IE6, which the majority of users are, it renders tableless. I guess a long story short, cross browser compatibility with deprecated versions of ie is going to be a pain IMO.
0
 

Author Comment

by:jhindle
ID: 22936856
Thank you for all your help.  I believe the problem is solved although I'm not certain whether it was from you.  I'm including the updated files to what I had orginally listed.  Thanks again for your assistence.
 

THE CSS FILE:
DROPDOWN.CSS
/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file  dropdown.css
 * @package  Dropdown
 * @version  0.7.1
 * @type  Transitional
 * @stacks  597-599
 * @browsers Windows: IE6+, Opera7+, Firefox1+
 *    Mac OS: Safari2+, Firefox2+
 *
 * @link  http://www.lwis.net/
 * @copyright 2006-2008 Live Web Institute. All Rights Reserved.
 *
 */
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}
ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}
ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}
ul.dropdown ul li {
 float: none;
}
ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}
ul.dropdown li:hover > ul {
 visibility: visible;
}
DEFAULT.CSS
/**
 * Default CSS Drop-Down Menu Theme
 *
 * @file  default.css
 * @name  Default
 * @version  0.1
 * @type  transitional
 * @browsers Windows: IE5+, Opera7+, Firefox1+
 *    Mac OS: Safari2+, Firefox2+
 *
 * @link  http://www.lwis.net/
 * @copyright 2008 Live Web Institute. All Rights Reserved.
 *
 * Module Classes: *.dir {} *.on {} *.open {} li.hover {} li.first {} li.last {}
 * Expected directory tag - li
 *
 */
@import "helper.css";

/*-------------------------------------------------/
 * @section  Base Drop-Down Styling
 * @structure ul (unordered list)
 *    ul li (list item)
 *    ul li a (links)
 *    /*\.class|(li|a):hover/
 * @level sep ul
 */

ul.dropdown {
 font-weight: bold;
}
 ul.dropdown li {
  padding: 7px 10px;
  border-style: solid;
  border-width: 1px 1px 1px 0;
  border-color: #fff #d9d9d9 #d9d9d9;
  background-color: #f6f6f6;
  color: #000;
 }
 ul.dropdown li.hover,
 ul.dropdown li:hover {
  background-color: #eee;
  color: #000;
 }
 ul.dropdown a:link,
 ul.dropdown a:visited { color: #000; text-decoration: none; }
 ul.dropdown a:hover  { color: #000; }
 ul.dropdown a:active { color: #ffa500; }

 /* -- level mark -- */
 ul.dropdown ul {
  width: 150px;
  margin-top: 1px;
 }
  ul.dropdown ul li {
   font-weight: normal;
  }
 
/*-------------------------------------------------/
 * @section  Support Class `dir`
 * @level sep ul, .class
 */

ul.dropdown *.dir {
 padding-right: 20px;
 background-image: url(images/nav-arrow-down.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

/* -- Components override -- */
ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-image: url(images/nav-arrow-right.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}
ul.dropdown-upward *.dir {
 background-image: url(images/nav-arrow-top.png);
}
ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
 background-image: url(images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
 padding-right: 10px;
 padding-left: 15px;
 background-image: url(images/nav-arrow-left.png);
 background-position: 0 50%;
}
#nav { width: 700px; }

#backBtn {
 position: absolute;
 left: 50px;
 font-family: "Times New Roman", Times, serif;
 font-size: 12px;
 font-weight: bold;
 color: #009900;
 border: 4px double #666666;
 top: 375px;
 width: 85px;
 cursor: pointer;
 background-color: #FFFF66;
}
#boxOfStuff {
 background-color: #FFFFCC;
 height: 250px;
 width: 480px;
 position: absolute;
 left: 50px;
 top: 75px;
 font-family: Arial, Verdana, sans-serif;
 font-size: 12px;
 color: #444444;
 padding-left: 20px;
 padding-right: 20px;
}
h1, h2, h3 {
 font-family: Arial, Verdana, sans-serif;
 font-weight: bold;
 color: #000099;  
}
h1 {
 font-size: 18px;
 text-align: center;
}
h2 {
 font-weight: bold;
 text-indent: 10px;
}
h3 {
 font-style: italic;
 color: #FF0000;
 display: inline;
}
#menuRel {
 position: absolute;
 left: 619px;
 top: 79px;
 cursor: pointer;
 background-color: #DDFFE8;
 border: 2px solid #333333;
 width: 110px;
}
#menuAbsol {
 position: absolute;
 left: 621px;
 top: 116px;
 cursor: pointer;
 background-color: #DDFFE8;
 border: 2px solid #333333;
 width: 110px;
}
______________________________________________________________________________________________________

THE HTML FILE:

DROPDOWN.CSS
/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file  dropdown.css
 * @package  Dropdown
 * @version  0.7.1
 * @type  Transitional
 * @stacks  597-599
 * @browsers Windows: IE6+, Opera7+, Firefox1+
 *    Mac OS: Safari2+, Firefox2+
 *
 * @link  http://www.lwis.net/
 * @copyright 2006-2008 Live Web Institute. All Rights Reserved.
 *
 */
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}
ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}
ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}
ul.dropdown ul li {
 float: none;
}
ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}
ul.dropdown li:hover > ul {
 visibility: visible;
}
DEFAULT.CSS
/**
 * Default CSS Drop-Down Menu Theme
 *
 * @file  default.css
 * @name  Default
 * @version  0.1
 * @type  transitional
 * @browsers Windows: IE5+, Opera7+, Firefox1+
 *    Mac OS: Safari2+, Firefox2+
 *
 * @link  http://www.lwis.net/
 * @copyright 2008 Live Web Institute. All Rights Reserved.
 *
 * Module Classes: *.dir {} *.on {} *.open {} li.hover {} li.first {} li.last {}
 * Expected directory tag - li
 *
 */
@import "helper.css";

/*-------------------------------------------------/
 * @section  Base Drop-Down Styling
 * @structure ul (unordered list)
 *    ul li (list item)
 *    ul li a (links)
 *    /*\.class|(li|a):hover/
 * @level sep ul
 */

ul.dropdown {
 font-weight: bold;
}
 ul.dropdown li {
  padding: 7px 10px;
  border-style: solid;
  border-width: 1px 1px 1px 0;
  border-color: #fff #d9d9d9 #d9d9d9;
  background-color: #f6f6f6;
  color: #000;
 }
 ul.dropdown li.hover,
 ul.dropdown li:hover {
  background-color: #eee;
  color: #000;
 }
 ul.dropdown a:link,
 ul.dropdown a:visited { color: #000; text-decoration: none; }
 ul.dropdown a:hover  { color: #000; }
 ul.dropdown a:active { color: #ffa500; }

 /* -- level mark -- */
 ul.dropdown ul {
  width: 150px;
  margin-top: 1px;
 }
  ul.dropdown ul li {
   font-weight: normal;
  }
 
/*-------------------------------------------------/
 * @section  Support Class `dir`
 * @level sep ul, .class
 */

ul.dropdown *.dir {
 padding-right: 20px;
 background-image: url(images/nav-arrow-down.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

/* -- Components override -- */
ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-image: url(images/nav-arrow-right.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}
ul.dropdown-upward *.dir {
 background-image: url(images/nav-arrow-top.png);
}
ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
 background-image: url(images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
 padding-right: 10px;
 padding-left: 15px;
 background-image: url(images/nav-arrow-left.png);
 background-position: 0 50%;
}
#nav { width: 700px; }

#backBtn {
 position: absolute;
 left: 50px;
 font-family: "Times New Roman", Times, serif;
 font-size: 12px;
 font-weight: bold;
 color: #009900;
 border: 4px double #666666;
 top: 375px;
 width: 85px;
 cursor: pointer;
 background-color: #FFFF66;
}
#boxOfStuff {
 background-color: #FFFFCC;
 height: 250px;
 width: 480px;
 position: absolute;
 left: 50px;
 top: 75px;
 font-family: Arial, Verdana, sans-serif;
 font-size: 12px;
 color: #444444;
 padding-left: 20px;
 padding-right: 20px;
}
h1, h2, h3 {
 font-family: Arial, Verdana, sans-serif;
 font-weight: bold;
 color: #000099;  
}
h1 {
 font-size: 18px;
 text-align: center;
}
h2 {
 font-weight: bold;
 text-indent: 10px;
}
h3 {
 font-style: italic;
 color: #FF0000;
 display: inline;
}
#menuRel {
 position: absolute;
 left: 619px;
 top: 79px;
 cursor: pointer;
 background-color: #DDFFE8;
 border: 2px solid #333333;
 width: 110px;
}
#menuAbsol {
 position: absolute;
 left: 621px;
 top: 116px;
 cursor: pointer;
 background-color: #DDFFE8;
 border: 2px solid #333333;
 width: 110px;
}

 
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now