Hi!
Here's a followup to my earlier post http://tinyurl.com/dthhs
(Full URL:
http://groups-beta.google.com/group/...f447eb6e5afd7/)
In the code below, I've used lists to implement a drop-down menu, and
it works well in IE, but is sort of bugg in NN/FF. You'll notice that
when moving right down the list to the last item ("Asia"), the list
will sometimes fail to collapse, if you exit fom the bottom. Strangely,
this problem does not occur when the cursor exits the list at the side
as shown below.
|----------------------|
| |
No problems here -> | Asia | <- No problems here
| |
|----------------------|
^
|
PROBLEMS
WHEN EXITING
HERE
Is this doccumented? Is there a work-around? Its trivial but annoying.
Thanks,
- Olumide
////////////// HTML code ///////////////
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function hideMenu() {
document.getElementById("menuContainer").style.dis play =
"none";
}
function showMenu() {
document.getElementById("menuContainer").style.dis play =
"block";
}
</script>
<STYLE>
li {
background-color: #FFFFFF;
font-weight: normal;
font-family: arial;
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
border: 1px solid black;
height: 20px;
}
ul{
margin: 0;
padding: 0;
list-style: none;
width: 200px;
}
ul ul {
display: none;
}
a {
display: block;
width: 200px;
text-decoration: none;
color: #000000;
}
</STYLE>
</head>
<body>
<ul onMouseOver="showMenu()" onMouseOut="hideMenu()">
<li><a href="#">Continents</a></li>
<ul id="menuContainer">
<li><a href="#">Europe</a></li>
<li><a href="#">Africa</a></li>
<li><a href="#">America</a></li>
<li><a href="#">Asia</a></li>
</ul>
</ul>
</body>
</html>
