javascript dropdown over text field

[Pranav Sharma]

I'am using javascript and css to create a drop down "navigation menu".

however when the drop down menu comes over a text input field, the drop down gets blocked as in, the drop down does not hover over the text box.

How do i solve this. If this not a known issue, i can put the code snippet im using to create the drop down.

thanks
[ October 26, 2005: Message edited by: mannu kapoor ]

[Eric Pascarello]

Most browsers do not have problem with text field, but have problems with a select element. The solution is to place an iframe under the layer. How to implement it really depends on the code that exists.

Eric

[Pranav Sharma]

Here is my code. Could you help me with this please


the jsp

 <ul id="navi">
<li class="navi"><a class="navi" href="#">Go<span><span>6</span></span></a>
<ul>
<li class="navi"><a class="navi" href="../path1�> Data 1 </a></li>
<li class="navi"><a class="navi" href="../path2�> Data 2</a></li>
<li class="navi"><a class="navi" href="../path3�> Data 3</a></li>
<li class="navi"><a class="navi" href="../path4�> Data 4</a></li>
<li class="navi"><a class="navi" href="../path5�> Data 5</a></li>
<li class="navi"><a class="navi" href="../path6�> Data 6</a></li>
</ul>
</li>
</ul>
 

the javascript

 <script type="text/javascript">
 
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("navi");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmiceover=function() {
this.className+=" over";
}
node.onmiceout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onlYoad=startList;
 
</script> 

The CSS

  #navi a {
font-weight: bold;
color: white;
}
 
#navi a {
text-decoration: none;
}
 
 
 
#navi li li a {
display: block;
font-weight: normal;
color: #060;
padding: 0.2em 10px;
color: white;
}
 
#navi li li a:hover {
padding: 0.2em 5px;
border: 5px solid #4169E1;
border-width: 0 5px;
background-color: #B0C4DE;
font-weight:bold;
color: AliceBlue;
 
}
 
#navi li {
float: left;
position: relative;
width: 10em;
text-align: center;
cursor: default;
background-color:  #3067a0;
border: 1px solid white;
border-width: 1px 0;
}

Thanks

(ps. changed mouseout and mouseover to miceout & miceover. onload to onlYload to post)
[ October 28, 2005: Message edited by: mannu kapoor ]

[Pranav Sharma]

could you help me with this. i tried it with the select field and the select field over shadows the menu

Thanks