hello!
i found an article on making a dropdown menu at this page:
i've had no problem making it work in every browser i've tried other than IE!!
perhaps someone can check out the code and let me know what i can do!
Here's the pertinent CSS:
[code=css]
<style type="text/css">
#left ul {
font: 12px/22px Verdana, Arial, Helvetica, sans-serif;
margin: 0px 0px 0px 0px;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
#left ul li {
position: relative;
}
#left li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
#left ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
#left li:hover ul, li.over ul {
display: block; }
</style>
[/code]
Javascript for IE:
[code=javascript]
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&& document.getEle mentById) {
navRoot = document.getEle mentById("left" );
for (i=0; i<navRoot.child Nodes.length; i++) {
node = navRoot.childNo des[i];
if (node.nodeName= ="LI") {
node.onmouseove r=function() {
this.className+ =" over";
}
node.onmouseout =function() {
this.className= this.className. replace(" over", "");
}
}
}
}
}
window.onload=s tartList;
//--><!]]></script>
[/code]
and here's the html:
[html]
<ul>
<li><a href="san_franc isco1.html">San Francisco</a>
<ul>
<li><a href="#" id="current">Ch inatown</a></li>
<li><a href="downtown1 .html">Downtown </a></li>
<li><a href="soma1.htm l">SoMa</a></li>
<li><a href="mission1. html">The Mission</a></li>
<li><a href="northBeac h1.html">North Beach</a></li>
<li><a href="castro1.h tml">The Castro</a></li>
</ul>
</li>
<li><a href="berkeley1 .html">Berkeley </a></li>
<li><a href="santa_cru z1.html">Santa Cruz</a></li>
<li><a href="big_sur1. html">Big Sur</a></li>
</ul>
[/html]
I've tried many variations but can't get it to work.
thank you very much!
i found an article on making a dropdown menu at this page:
i've had no problem making it work in every browser i've tried other than IE!!
perhaps someone can check out the code and let me know what i can do!
Here's the pertinent CSS:
[code=css]
<style type="text/css">
#left ul {
font: 12px/22px Verdana, Arial, Helvetica, sans-serif;
margin: 0px 0px 0px 0px;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
#left ul li {
position: relative;
}
#left li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
#left ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
#left li:hover ul, li.over ul {
display: block; }
</style>
[/code]
Javascript for IE:
[code=javascript]
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&& document.getEle mentById) {
navRoot = document.getEle mentById("left" );
for (i=0; i<navRoot.child Nodes.length; i++) {
node = navRoot.childNo des[i];
if (node.nodeName= ="LI") {
node.onmouseove r=function() {
this.className+ =" over";
}
node.onmouseout =function() {
this.className= this.className. replace(" over", "");
}
}
}
}
}
window.onload=s tartList;
//--><!]]></script>
[/code]
and here's the html:
[html]
<ul>
<li><a href="san_franc isco1.html">San Francisco</a>
<ul>
<li><a href="#" id="current">Ch inatown</a></li>
<li><a href="downtown1 .html">Downtown </a></li>
<li><a href="soma1.htm l">SoMa</a></li>
<li><a href="mission1. html">The Mission</a></li>
<li><a href="northBeac h1.html">North Beach</a></li>
<li><a href="castro1.h tml">The Castro</a></li>
</ul>
</li>
<li><a href="berkeley1 .html">Berkeley </a></li>
<li><a href="santa_cru z1.html">Santa Cruz</a></li>
<li><a href="big_sur1. html">Big Sur</a></li>
</ul>
[/html]
I've tried many variations but can't get it to work.
thank you very much!
Comment