Understanding IE6 :hover confused...?

[Zypherone]

I am trying to create my own dropdown menu, and as everyone is aware the :hover pseudo-class does not function like all other browser, as it was intended for the use of the anchor tag.

 

Having that fact in mind, I have read about using tables as an alternative way to create a dropdown. Now, My issue is that I am trying to do that drop one level and open sideways underneath the menu.

 

ITEM ONE | ITEM TWO (hover of ITEM ONE and is displayed as such)

 

ITEM ONE | ITEM TWO

ITEM ONE.1 | ITEM ONE.2 | ITEM ONE.3

 

or hover of ITEM TWO

ITEM ONE | ITEM TWO

ITEM TWO.1 | ITEM TWO.2 | ITEM TWO.3

 

Here is my current code:

CSS CODE

a#testing {
display: block;
height: 20px;
width: 50px;
border: 1px solid #000000;
color: #000000;
}

a#testing table { 
position:absolute;
top:0;
left:0;
border-collapse:collapse;
padding:0;
width:0;
height:0;
margin:-1px;
}

a#testing:hover {
position: relative;
white-space: normal;
z-index:200;	
}

HTML CODE

a href="" id="testing">test<table><tr><td>blah</td></tr></table></a>

 

Now I have not finalised the rest as I need the :hover function to work correctly, but I am in a dilemma where ok, :hover works kind of ok, but the pre :hover is shown. Using display:none or display:block will solve this for other browsers except IE6 as it does not support selectors after the :hover pseudo-class.

 

Any thoughts?

 

 

[haku]

IE6 supports selectors after the :hover class. I built a menu on that premise last week.

[Zypherone]

That's what I initially thought, and tried using display: none and display: block on my initial markup, but this did not work on IE6. Or does this only work on selected elements only?

[haku]

Not sure what you mean without seeing your code.