Skaczący hover w IE Opcje

[bpawlik]

Witam

mam taki kod CSS:

[HTML] pobierz, plaintext 
div#navv {margin:0px;padding:0px;font-family: Tahoma, Verdana, Arial;font-size:12px;}
div#navv {float:left; width:130px;  background:#fff;line-height:20px;}
div#navv ul {margin: 0px; padding:0px; width:130px; background:white;}
div#navv li {position:relative; list-style:none; margin:0px;padding:0px;}
 
div#navv li.s1 {color:red;height:30px;margin:0px;}
div#navv li.s2 {color:green;height:30px;margin:0px;}
div#navv li.s3 {color:yellow;height:30px;margin:0px;}
 
div#navv li.s1 a {display:block; width:130px;height:30px;margin:0px;}
div#navv li.s2 a {display:block; width:130px;height:30px;margin:0px;}
div#navv li.s3 a {display:block; width:130px;height:30px;margin:0px;}
 
div#navv li.s1 a:hover {background-color:blue;height:30px;margin:0px;}
div#navv li.s2 a:hover {background-color:blue;height:30px;margin:0px;}
div#navv li.s3 a:hover {background-color:blue;height:30px;margin:0px;}
 
div#navv ul ul {position:absolute; top:0px; left:130px; display:none;margin:0px;}
div#navv ul.l1 li.s1:hover ul.l2 {display:block;margin:0px;}
div#navv ul.l2 li.s2:hover ul.l3 {display:block;margin:0px;}
[HTML] pobierz, plaintext 

i do tego taki kod w HTML

[HTML] pobierz, plaintext 
body {behavior: url(css/csshover.htc);}
...
<div id="navv">
 
	<ul class="l1">
		<li class="s1"><a href="">Menu1</a>
		<li class="s1"><a href="">Menu2</a>
			<ul class="l2">
        			<li class="s2"><a href="">Menu 2_1</a>
          				<ul class="l3">
            					<li class="s3"><a href="">Menu 2_1_1</a></li>
          				</ul>
        			</li>
        			<li class="s2"><a href="">Menu 2_2</a>
          				<ul class="l3">
            					<li class="s3"><a href="">Menu 2_2_1</a></li>
          				</ul>
        			</li>
 
        		</ul>
		</li>
		<li class="s1"><a href="">Menu 3</a></li>
  	</ul>
</div>
[HTML] pobierz, plaintext 

I teraz problem, w FF, Opera wszystko jest OK, w IE 6.0 jak najadę na Menu 2 to wszystko co jest pod spodem skacze, tak samo jak najadę na Menu 2_1 to też skacze Menu 2_2.

Próbowałe już wielu rzeczy ale jakoś nic nie przynosi efektu.
Będę wdzięczy za wskazówki.

[bigZbig]

Jaka jest zawartosc pliku csshover.htc?

[bpawlik]

[HTML] pobierz, plaintext 
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
 *	HOVER - V1.00.031224 - whatever:hover in IE
 *	---------------------------------------------
 *	Peterned - http://www.xs4all.nl/~peterned/
 *	(c) 2003 - Peter Nederlof
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	---------------------------------------------
 */
 
var CSSBuffer, doc = window.document;
 
function parseStylesheets() {
	var rules, sheet, sheets = doc.styleSheets;
	var bufferIndex = sheets.length;	
	var head = doc.getElementsByTagName('head')[0];
	var buffer = doc.createElement('style');
 
	buffer.setAttribute('media', 'screen');
	buffer.setAttribute('type', 'text/css');
	head.appendChild(buffer);
	CSSBuffer = sheets[bufferIndex];
 
	for(var i=0; i<sheets.length -1; i++) {
		sheet = sheets[i];
		if(!sheet.media || sheet.media == 'screen') {
			rules = sheet.rules;
			for(var j=0; j<rules.length; j++) {
				parseCSSRule(rules[j]);
			}
		}
	}
}
	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!select || !style || select.indexOf(':hover') < 0) return;
		var newSelect = select.replace(/\:hover/g, '.onHover');
		CSSBuffer.addRule(newSelect, style);
 
		var affected = select.replace(/\:hover.*$/g, '');
		var elements = getElementsBySelect(affected);
		for(var i=0; i<elements.length; i++) {
			if(elements[i].nodeName == 'A') continue;
			new HoverElement(elements[i]);
		}
	}
 
/**
 *	HoverElement
 *	-------------------------
 *	applies the hover
 */
 
function HoverElement(element) {
	if(element.isHoverElement) return;
	element.isHoverElement = true;
	element.attachEvent('onmouseover', 
		function() { element.className += ' onHover'; });
 
	element.attachEvent('onmouseout', 
		function() { element.className = element.className.replace(/onHover/g, ''); });
}
 
/**
 *	domFinder
 *	-----------------------------------
 *	returns list of elements based on css selector
 */
 
function getElementsBySelect(rule) {
	var nodeList = [doc], sets = rule.split(' ');
	for(var i=0; i<sets.length; i++) {
		nodeList = domFinder.filterNodes(sets[i], nodeList);
	}	return nodeList;
}
 
var domFinder = {
	findNodes:function(tag, docs) {
		var res, nodes = [];
		for(var i=0; i<docs.length; i++) {
			res = docs[i].getElementsByTagName(tag);
			for(var j=0; j<res.length; j++) nodes[nodes.length] = res[j];
		}	return nodes;
	},
 
	filterNodes:function(select, docs) {
		var filtered = [], nodes,rule,atr,s = (/#|\./).exec(select);
		if(!s) return this.findNodes(select, docs);
		nodes = this.findNodes((rule = select.split(s))[0], docs);
		atr = (s == '#')? 'id':'className';
		for(var i=0; i<nodes.length; i++) {
			if(new RegExp('(^|\\s)' +  rule[1] + '(\\s|$)').exec(nodes[i][atr]))
				filtered[filtered.length] = nodes[i];
		}	return filtered;
	}
}
</script>
[HTML] pobierz, plaintext 

ściągnięty z http://www.xs4all.nl/~peterned/csshover.html

[erix]

Mam podobny problem, ale dla :focus w <input type="text" />
W jednym <div> są dwa linki i ów input. Po kliknięciu nań pole "zawija się" do drugiego wiersza...

Również korzystam z whatever:hover

[gekon]

Dla IE (przez komentarze warunkowe) zaaplikuj:

[HTML] pobierz, plaintext 
div#navv li a { zoom: 1; display: inline;}
[HTML] pobierz, plaintext 

[erix]

W moim przypadku nie działa.

[gekon]

@erix: W Twoim przypadku nie widziałem kodu (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)