Thank you for testing it on other browser. 
Yes, the more up to date browsers support that.
Hi ralph,can you please enlighten my mind on this script what does this do?
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" over\\b"), “”);
}
It’s just a bit of JavaScript to help IE6 with the hover effect. For more details, you’ll have to ask about it in the JS forum.
ok thanks i will try to ask them.
Really, IE6 is dead and buried now, so unless you are asking because you want to learn JS, I wouldn’t bother.
I would just leave that code out.
yup i am also learning js…
Hi ralph, I am having problem on this my drop down menu i want to put scrollbar on my subitems which is very long,but i could not display it properly…I want that when i am going to hover the subitems it will display in the left side,and if this have many items the scrollbar will be visible,…can you help me on this,i am confuse.
Thank you in advance. here is my css and html file.
.nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav li a:first-letter{
text-transform: uppercase;
}
.nav > li{
float: left;
margin-right: #959597 0.1em;
min-width: 8em;
text-align: center;
background-color: #FFF;
border:solid 1px #959597;
}
.nav li a:link,
.nav li a:visited{
text-decoration: none;
color: #606061;
display: block;
}
.nav li ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li,
.nav #scroll1div ul li,
#scroll1,#scroll2,#scroll3{
display: none;
}
.nav li:hover li,
.nav li:hover #scroll1,
.nav li:hover #scroll2,
.nav li:hover #scroll3
{
display: block;
text-align: justify;
color: #606061;
}
.nav ul li{
border: solid 1px #959597;
}
.nav ul li:hover, .nav li:hover,
.nav li:hover li a:hover, .nav li:hover a
{
color: #FFF;
background-color: #E56500;
}
.nav li:hover li a{
color: #777777;
background-color: #d2cb08;
}
html file
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="menu2.css" style="text/css"/>
</head>
<body>
<ul class="nav">
<li><a href="#">home</a>
<ul>
<li><a href="#">how</a></li>
<li><a href="#">where</a></li>
<li><a href="#">when</a></li>
</ul>
</li>
<li><a href="#">about</a>
<div style="overflow:auto;height:200px;" id="scroll1">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
<li><a href="#">I</a></li>
<li><a href="#">J</a></li>
<li><a href="#">L</a></li>
<li><a href="#">M</a></li>
<li><a href="#">N</a></li>
<li><a href="#">O</a></li>
<li><a href="#">P</a></li>
<li><a href="#">Q</a></li>
</ul>
</div>
</li>
<li><a href="#">when</a></li>
<li><a href="#">services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a>
<div style="overflow:auto;height:200px;" id="scroll2">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">subitems</a>
<div style="overflow:auto;height:200px;" id="scroll3">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
<li><a href="#">I</a></li>
<li><a href="#">J</a></li>
<li><a href="#">L</a></li>
<li><a href="#">M</a></li>
<li><a href="#">N</a></li>
<li><a href="#">O</a></li>
<li><a href="#">P</a></li>
<li><a href="#">Q</a></li>
</ul>
</div>
</li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
<li><a href="#">I</a></li>
<li><a href="#">J</a></li>
<li><a href="#">L</a></li>
<li><a href="#">M</a></li>
<li><a href="#">N</a></li>
<li><a href="#">O</a></li>
<li><a href="#">P</a></li>
<li><a href="#">Q</a></li>
</ul>
</div>
</li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
</ul>
</body>
</html>