Hi,
I am using perl with CSS 2 level drop down menu.
but it works fine with mozilla but not with IE.
first time it loads but next time the drop down will not appear if mouse is moved over.
Here is the code:-
#!c:\perl\bin\perl.exe
use CGI;
use CGI qw(:standard);
print header;
@arr=('1.1234567','2.9876543');
foreach $ar(@arr)
{
print<<HTML;
<style type="text/css">
#cssdropdown, #cssdropdown ul {
padding: 0;
margin: 0;
list-style: none;
}
#cssdropdown li {
float: left;
position: relative;
}
.mainitems{
border: 1px solid black;
background-color: #FFEEC6;
}
.mainitems a{
margin-left: 6px;
margin-right: 8px;
text-decoration: none;
}
.subuls{
display: none;
width: 10em;
position: absolute;
top: 1.2em;
left: 0;
background-color: lightyellow;
border: 1px solid black;
}
.subuls li{
width: 100%;
}
.subuls li a{
text-decoration: underline;
}
#cssdropdown li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the
containing li, rather than bottom left */
top: auto;
left: auto;
}
#cssdropdown li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
#restofcontent { /*wrap rest of content of the page inside this div*/
clear: left;
}
</style>
<!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document;.getElementById) {
cssdropdownRoot = document.getElementById("cssdropdown");
for (x=0; x<cssdropdownRoot.childNodes.length; x++) {
node = cssdropdownRoot.childNodes[x];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
if (window.attachEvent)
window.attachEvent("onload", startList)
else
window.onload=startList;
//--><!]]>
<ul id="cssdropdown">
<li class="mainitems">
<a href="http://www.cssdrive.com">CSS Gallery</a>
<ul class="subuls">
<li><a href="">Gordon Mac</a></li>
<li><a href="">Juiced Thoughts</a></li>
<li><a href="">The Daily Flight</a></li>
<li><a href="">GrapeFruit</a></li>
</ul>
</li>
<li class="mainitems">
<a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a>
<ul class="subuls" style="width: 15em">
<li><a href="">CSS2 Generated Content</a></li>
<li><a href="">Custom scrollbar colors</a></li>
<li><a href="">Markerless and "no indent" Lists</a></li>
</ul>
</li>
</ul>
[size=6][/size]
<div id="restofcontent">
<br />
"
</div>
HTML
}
pls help me in soiving this problem
with regards
Archana
