Below is the style to control the Unordered List shown in Example 1 and 2
The above menu needs a script to dynamically allow an on-mouse-over (hover)
event on the <li> tags to block/hide the inline elements.
Add one id to the parent (highest level) <ul>.
Give it the id nav: <ul id="nav">
Build a scrip that does the following:
-
Check if the browser is IE - since that is the browser that does not handle
the <li> hover pseudo-class.
(Check if document.getElementById or document.all, return true) - If true, the next step is to find the element we gave the id "nav". (use getElementById('nav') - assign the object to the variable navRoot )
- Then loop through all child elements to the navRoot object. Each child element is part of the object array, and can be called using the method: childNodes[n] - assign the current one to a variable called node.
- If the node (childNodes[n]) is a <li> tag, then do the "onmouseover"/ "onmouseout" modification. This is done by using an anonymous function.
- Use the anonymous function to alter the node.onmouseover method to the user defined css class (we created in step 2) "cover".
-
Then use another
anonymous function to replace the "cover" class on the node.onmouseout
method to "".
That's it! Now you can use the menu in IE.
<html>
<head>
<title>menu</title>
<style type="text/css">
ul { /* Style for all <ul> tags */
margin: 0; /* margin removes indentation */
padding: 0; /* margin removes indentation (non-ie)*/
list-style: none; /* removes bullets (non-ie) */
background-color:Blue; /* Optional: remove for transparent effect */
}
li { /* Style for all <li> items */
float: left; /* changes items to Horizontal */
position: relative; /* keep the <li> from bunching to right */
width: 125px; /* this is the width of each menu item */
}
/* Selects for all <ul> elements somewhere inside a <li> element */
li ul { /* Style for second-level lists */
display: none; /* hidden on load */
position: absolute; /* keep location absolute*/
top: 20px; /* keep 20 px from top */
left: 0; /* removes indentation to left */
}
/* IE 6.0 and lower don't understand the CSS child selector ">" */
li>ul { /* NN/IE COMPATIBILITY FIX:*/
top: auto; /* to override top and left in browsers other */
left: auto; /* than IE,which will position to the top right */
} /* of the containing li, rather than bottom left */
/* BELOW IS THE MAGIC */
/* style for <ul> tag where pseudo-class is somewhere inside an <li> element */
/* This works in CSS Level 2 compliant browsers (non-IE) */
li:hover ul{ /* lists nested under hovered list items */
display: block; /* hidden on load (hover is CSS Level 2 only) */
}
/* style for <ul> tag where new class "cover" is attribute of <li> element */
/* This works in CSS Level 1 compliant browsers with the help of some javascript*/
li.cover ul { /* lists nested under hovered list items */
display: block; /* hidden by default */
}
/* Selects topMenu class somewhere inside an <a> element */
A.topMenu { /* Style for link tags */
text-decoration:none; /* no underline */
color:white; /* text color */
}/* modification for hover event */
A.topMenu:hover { /* Style for link tags */
background-color:orange; /* background color */
color:green; /* text color */
}
</style>
<script type="text/javascript">
<!--
function startList() {
if (document.all && document.getElementById) { // CHECK FOR STANDARD
navRoot = document.getElementById("nav"); // FIND/assign ID "nav"
for (i=0; i<navRoot.childNodes.length; i++) { // LOOP THROUGH nav NODES
node = navRoot.childNodes[i]; // first/last node array
if (node.nodeName=="LI") { // IF NODE IS <li>
node.onmouseover=function() { // ASSIGN result of Function
this.className+=" cover"; // ALTER className append cover
} // END anonymous Function
node.onmouseout=function() { // ASSIGN result of Function
// replace classname - find and replace " cover" with ""
this.className=this.className.replace(" cover", "");
} // END anonymous Function
} // END if (node.nodeName=="LI")
} // END LOOP THROUGH nav NODES
} // END CHECK FOR STANDARD
} // END shorthand anonymous Function
//-->
</script>
</head>
<body onload="startList()">
<ul id="nav">
<li>First
<ul>
<li><a href="#" class="topMenu">aaaaaaaa</a></li>
<li><a href="#" class="topMenu">bbbbbbbb</a></li>
<li><a href="#" class="topMenu">cccccccc</a></li>
<li><a href="#" class="topMenu">dddddddd</a></li>
</ul>
</li>
<li>Second
<ul>
<li><a href="" class="topMenu">eeeeeeee</a></li>
<li><a href="" class="topMenu">ffffffff</a></li>
<li><a href="" class="topMenu">gggggggg</a></li>
</ul>
</li>
<li>Third
<ul>
<li><a href="" class="topMenu">hhhhhhhh</a></li>
<li><a href="" class="topMenu">iiiiiiii</a></li>
<li><a href="" class="topMenu">jjjjjjjj</a></li>
<li><a href="" class="topMenu">kkkkkkkk</a></li>
<li><a href="" class="topMenu">llllllll</a></li>
</ul>
</li>
</ul>
<div>
<p>
content here...
</p>
</div>
</body>
</html>