I am trying to build a CSS menu for a site. I'm using the :hover technique and it is really working well in firefox, but not well in IE. I'm using the csshover.htc file to try and fix the IE problems, but IE is displaying it as a vertical menu instead of horizontal. I'm on a tight time frame and some extra sets of eyes would be very helpful. Here's the HTML
The csshover.htc file is below:
HTML:
<html>
<head>
<style type="text/css" media="screen">
/**************** menu coding *****************/
#menu {
width: 100%;
background: #000;
float: left;
}
#menu ul {
list-style: none;
padding: 0;
margin-left: 15;
margin-right: 0;
margin-bottom: 0;
float: left;
}
#menu a, #menu h2 {
font: bold 12px/16px arial, helvetica, sans-serif;
display: block;
border-width: 0px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #F7CB29;
background: #000;
text-transform: uppercase;
}
#menu h2:hover {
background: #3F3F3F
}
#menu a {
color: #F7CB29;
background: #000;
text-decoration: none;
}
#menu a:hover {
color: #F7CB29;
background: #3F3F3F;
}
#menu li {
position: relative;
background: #000000;
}
.menu-item {
position: relative;
background: #000000;
width: 10em;
}
#menu ul ul {
position: absolute;
z-index: 500;
margin-left:0;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
<body>
<h1>New Menu</h1>
<!-- Start Menu -->
<div id="menu">
<ul>
<li><h2>Property Search</h2>
<ul>
<li class="menu-item"><a href="link" target="_blank">Search Property Listings</a></li>
<li class="menu-item"><a href="link" target="_blank">Search Our Featured Listings</a></li>
</li></ul>
</ul>
<ul>
<li><h2>Relocation</h2>
<ul>
<li class="menu-item"><a href="link">Relocation Services</a></li>
<li class="menu-item"><a href="link" target="_blank">The Relo Network</a></li>
<li class="menu-item"><a href="link">Corporate Relocation</a></li>
<li class="menu-item"><a href="link">About the Huntsville Area</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2>Buying a Home</h2>
<ul>
<li class="menu-item"><a href="link">Tips on Buying a Home</a></li>
<li class="menu-item"><a href="link" target="_blank">What is your FICO?</a></li>
<li class="menu-item"><a href="link">Contact an Agent</a></li>
</ul></li>
</ul>
<ul>
<li><h2>Selling a Home</h2>
<ul>
<li class="menu-item"><a href="link">Tips on Selling a Home</a></li>
<li class="menu-item"><a href="link">Contact an Agent</a></li>
</ul></li>
</ul>
<ul>
<li><h2>Contact Us</h2>
<ul>
<li class="menu-item"><a href="link">Contact an Agent</a></li>
<li class="menu-item"><a href="link">Contact Us</a></li>
</ul></li>
</ul>
</div>
</body>
</html>The csshover.htc file is below:
Code:
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* Pseudos - V1.30.050121 - hover & active
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2005 - Peter Nederlof
*
* Credits - Arnoud Berendsen
* - Martin Reurings
* - Robert Hanson
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/
var currentSheet, doc = window.document, activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}
function parseStylesheets() {
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
} catch(securityException){}
}
try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
var affected = select.replace(/:hover.*$/, '');
var elements = getElementsBySelect(affected);
currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}
function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
node.attachEvent(events.on,
function() { node.className += ' ' + className; });
node.attachEvent(events.off,
function() { node.className =
node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all;
for(var j=0; j<result.length; j++) {
node = result[j];
if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
classname[1] + '\\b').exec(node.className)))) continue;
nodes[nodes.length] = node;
}
} return nodes;
}
</script>
