CSS Menu Layout Help Needed
I have a simple three tier slide out menu that is working fine The problem I ran into is in trying to import the contents into another page i'm running into conflicts with items like the UL, LI etc. I need help with primarily the frist three items in the CSS. I need to be able to give them a unique ID and apply that in the HTML so they will function as I have designed and not conflict with other items on the page they will be imported into to.
CSS Code
Web Page Code
CSS Code
ul,li {
display: block;
margin: 0;
padding: 0;
border: 0;
}
ul {
width: 210px;
list-style-type: none;
}
li {
position: relative;
padding: 0px;
z-index: 9;
}
li.productfolder {
font: Arial;
padding: 2px 0 4px 15px;
/*background-color: #EFEFEF;*/
width: 210px;
}
li.productfolder:hover {
z-index: 10;
background-color: #EFEFEF;
font: Arial;
}
li.productfolder ul {
position: absolute;
display: none;
left: 130px; /* IE */
top: 5px;
}
li.productfolder>ul {
left: 210px;
top: 0px;
}
ul.level1 li.productfolder:hover ul.level2 {
display: block;
width: 210px;
}
ul.level2 li.productfolder:hover ul.level3 {
display: block;
width: 210px;
}
#productmenu a {
padding: 2px;
text-decoration: none;
width: 100%; /* IE */
}
/* a {
padding: 2px;
text-decoration: none;
width: 100%; /* IE */
/*}
li>a {
width: auto;
}*/
li a.submenu {
background-color: #EEE;
padding-left: 10px;
font: Arial;
display: block;
padding-top: 3px;
padding-bottom: 4px;
}
li.explain {
font: Arial;
background-color: #DCEAF9;
color: #6699CC;
padding-left: 10px;
padding-top: 4px;
padding-bottom: 4px;
width: 190px;
}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html li.explain {
width: 202px;
}
/* End hide from IE5/mac */
#productmenu a:link, a:visited {
color: #666;
}
#productmenu a:hover {
color: #000;
}
#productmenu {
border: 0px;
margin: 0;
padding: 0;
width: 150px;
}
/*#link {
font: 11px Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
padding: 0px 0px 0px 20px;
margin-top: 15px;
}*/
Web Page Code
<!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>
<title>DK Menu</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<link href="menu.css" rel="stylesheet" type="text/css" />
<!--
Script to help dumb IE understand :hover on non-anchors. In this case, we're specifically
assigning mouseover events and a new css classname ("over") to li elements of the sidenav ul.
-->
<script language="JavaScript" type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("productslidenav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></script>
</head>
<body>
<!-- begin menu -->
<div id="productmenu">
<ul class="level1" id="productslidenav">
<!-- menu1 -->
<li class="productfolder">
<!-- Main Category -->
<a href="">Tackifier Resins</a>
<!-- Sub Categories -->
<ul class="level2">
<li class="productfolder">
<a href="">Octylphenol Resins</a>
<ul class="level3">
<li><a href="t" class="submenu">SP-1068</a></li>
<li><a href="t" class="submenu">HRJ-2765</a></li>
<li><a href="t" class="submenu">HRJ-4047</a></li>
<li><a href="t" class="submenu">HRJ-10420</a></li>
<li><a href="t" class="submenu">SMD-31161</a></li>
<li><a href="t" class="submenu">SMD-31224</a></li>
<li><a href="t" class="submenu">R7510P</a></li>
<li><a href="t" class="submenu">R75510PJ</a></li>
<li><a href="t" class="submenu">R7510PL</a></li>
<li><a href="t" class="submenu">R7521P</a></li>
<li><a href="t" class="submenu">R7578P</a></li>
<li><a href="t" class="submenu">XR14111E</a></li>
</ul>
<li class="productfolder">
<a href="">Bulylphenol Resins</a>
<ul class="level3">
<li><a href="t" class="submenu">Product1</a></li>
<li><a href="t" class="submenu">Product2</a></li>
<li><a href="t" class="submenu">Product3</a></li>
<li><a href="t" class="submenu">Product4</a></li>
</ul>
<li class="productfolder">
<a href="">Supertackifiers</a>
<ul class="level3">
<li><a href="t" class="submenu">Product1</a></li>
<li><a href="t" class="submenu">Product2</a></li>
<li><a href="t" class="submenu">Product3</a></li>
<li><a href="t" class="submenu">Product4</a></li>
</ul>
<li class="productfolder">
<a href="">Terpen Phenolic</a>
<ul class="level3">
<li><a href="t" class="submenu">Product1</a></li>
<li><a href="t" class="submenu">Product2</a></li>
<li><a href="t" class="submenu">Product3</a></li>
<li><a href="t" class="submenu">Product4</a></li>
</ul>
<li class="productfolder">
<a href="">Hydrocarbon Based</a>
<ul class="level3">
<li><a href="t" class="submenu">Product1</a></li>
<li><a href="t" class="submenu">Product2</a></li>
<li><a href="t" class="submenu">Product3</a></li>
<li><a href="t" class="submenu">Product4</a></li>
</ul>
</ul>
</li>
<!-- menu2 -->
<li class="productfolder">
<a href="">Nulla facilisi</a>
<ul class="level2">
<li class="productfolder">
<a href="">sfgfgsdggsfgsdfg</a>
<ul class="level3">
<li><a href="t" class="submenu">Test</a></li>
<li><a href="t" class="submenu">Test</a></li>
<li><a href="t" class="submenu">Test</a></li>
<li><a href="t" class="submenu">Test</a></li>
</ul>
</ul>
</li>
</ul>
</div>
<!-- end menu -->
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
If other elements on the page are wrongly affected, then you will have to apply a CLASS to all elements of the LIST that you want to import. You should probably do this anyway, to make for easy integration.
Pick a name for the elements, say LIST2 and give all elements in that list a CLASS=LIST2 designation, fix the CSS to match, then it can be integrated into anything anywhere, and it will work.