onmouseover on option

IE 4/5 are really old. It is functional in IE6. There are 3.2% of the internet population using IE5, and who knows how little the IE4 is. You need to upgrade.

Browser Stats ( http://www.w3schools.com/browsers/browsers_stats.asp)

Try the following. Also, I would suggest using Firefox. You can use the Error Console to help debug. That should be your first JavaScript stop.

<select name="selectName">
<option onmouseover="this.parentNode.title=this.value" value="1 Kibology">1 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="2 Kibology">2 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="3 Kibology">3 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="4 Kibology">4 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="5 Kibology">5 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="6 Kibology">6 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="7 Kibology">7 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="8 Kibology">8 Kibology</option>
<option onmouseover="this.parentNode.title=this.value" value="9 Kibology">9 Kibology</option>
</select>

You can create your own custom drop down menu. Just use the onmouseover to your liking.

<div id='pagemenu' style='position:absolute;display:none'>
<table cellpadding=3 cellspacing=0 style='border: 1px solid #000000;background:#eeeeee' onmouseout="document.getElementById('pagemenu').style.display='none'">
<tr>
<td style='cursor:pointer' onmouseover="this.style.background='#ffffff';displayPJ('blank')" onmouseout="this.style.background='#eeeeee'"onclick="window.location='hhttp://www.google.com'">Google</td>
<td style='cursor:pointer' onmouseover="this.style.background='#ffffff';displayPJ('blank')" onmouseout="this.style.background='#eeeeee'"onclick="window.location='hhttp://www.yahoo.com'">Yahoo</td>
<td style='cursor:pointer' onmouseover="this.style.background='#ffffff';displayPJ('blank')" onmouseout="this.style.background='#eeeeee'"onclick="window.location='hhttp://www.lycos.com'">Lycos</td>
</tr>
</table>
</div>

<script language="JavaScript">
function displayPJ(obj){
if(obj != "blank"){
if(obj.offsetParent){
x = obj.offsetLeft;
y = obj.offsetTop;
h = obj.offsetHeight;
while(obj = obj.offsetParent){
x += obj.offsetLeft;
y += obj.offsetTop;
}
}
document.getElementById("pagemenu").style.left = x;
document.getElementById("pagemenu").style.top = y;
}
document.getElementById("pagemenu").style.display = "block";
}
</script>

<font onclick="displayPJ(this)">Search Engines</font>

If only can use on FireFox tht mean we can't display the description by using onmouseover on IE6/IE7 ?
Did you even try my code? It works on IE5.5, IE6, IE7, Firefox 1, Firefox 1.5, Firefox 2, and Safari.

I had try this code on my IE6 , but it just a normal selection box. Is it i need to set any thing on my IE ?No, not that code. The code I posted after that to create your own custom drop down.

Here it is again.
<div id='pagemenu' style='position:absolute;display:none'>
<table cellpadding=3 cellspacing=0 style='border: 1px solid #000000;background:#eeeeee' onmouseout="document.getElementById('pagemenu').style.display='none'">
<tr>
<td style='cursor:pointer' onmouseover="this.style.background='#ffffff';displayPJ('blank')" onmouseout="this.style.background='#eeeeee'"onclick="window.location='hhttp://www.google.com'">Google</td>
<td style='cursor:pointer' onmouseover="this.style.background='#ffffff';displayPJ('blank')" onmouseout="this.style.background='#eeeeee'"onclick="window.location='hhttp://www.yahoo.com'">Yahoo</td>
<td style='cursor:pointer' onmouseover="this.style.background='#ffffff';displayPJ('blank')" onmouseout="this.style.background='#eeeeee'"onclick="window.location='hhttp://www.lycos.com'">Lycos</td>
</tr>
</table>
</div>

<script language="JavaScript">
function displayPJ(obj){
if(obj != "blank"){
if(obj.offsetParent){
x = obj.offsetLeft;
y = obj.offsetTop;
h = obj.offsetHeight;
while(obj = obj.offsetParent){
x += obj.offsetLeft;
y += obj.offsetTop;
}
}
document.getElementById("pagemenu").style.left = x;
document.getElementById("pagemenu").style.top = y;
}
document.getElementById("pagemenu").style.display = "block";
}
</script>

<font onclick="displayPJ(this)">Search Engines</font>