"tiered" multi-level menu not working in IE

[Paul]

Below is the html and css. It works in Firefox but not IE. When you click on
"Your Links", it should cause a new menu "system" to open up to the right of
the "Your Links" with two menu options.

What am I missing to make it work in IE?
HTML Code:
.....
#navigation {
float: left;
width: 125px;
padding: 0;
}
#navigation ul {
margin: 0;
list-style: none;
margin-top: 2px;
padding: 0;
}
#navigation li {
width: 125px;
border-bottom: 1px solid #722100;
}
..menu_here{
background-color: #a682a9;
color: #FFFFFF;
}
#navigation a:link, #navigation a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
color: #FFFFFF;
text-decoration: none;
height: 100%;
}
#navigation a:hover {
background-color: #9c783a;
color: #FFFFFF;
}
#navigation li {
position: relative;
}
#navigation ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
div#navigation ul ul,
div#navigation ul li:hover ul ul{
display: none;
background-image: url(menu.gif);
background-repeat: repeat-y;
background-position: left top;
}
div#navigation ul li:hover ul,
div#navigation ul ul li:hover ul{
display: block;
}HTML Code:
.....
<div id="navigation" >
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Your Links</a>
<ul>
<li><a href="page1.php ">Link 1</a></li>
<li><a href="page2.php ">Link 2</a></li>
<li><a href="page3.php ">Link 3</a></li>
</ul>
</li>
<li><a href="links.php ">Links</a></li>
</ul>
</div>

[John Hosking]

Paul wrote:

Below is the html and css. It works in Firefox but not IE. When you click on
"Your Links", it should cause a new menu "system" to open up to the right of
the "Your Links" with two menu options.

div#navigation ul ul,
div#navigation ul li:hover ul ul{
display: none;
background-image: url(menu.gif);
background-repeat: repeat-y;
background-position: left top;
}
div#navigation ul li:hover ul,
div#navigation ul ul li:hover ul{
display: block;
}HTML Code:
....
<div id="navigation" >
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Your Links</a>
<ul>
<li><a href="page1.php ">Link 1</a></li>
<li><a href="page2.php ">Link 2</a></li>
<li><a href="page3.php ">Link 3</a></li>
</ul>
</li>
<li><a href="links.php ">Links</a></li>
</ul>
</div>

An URL would have been better. I could have tried out a few things. But:

IE (you didn't say, but I'm assuming you mean IE6) doesn't support
:hover on anything but <a>. So your li:hover won't work the way you
want. (Folks usually make <aa full li-sized block then react to the
a;hover.) As one little reference about the pseudo-classes:
http://css.maxdesign.com.au/selectut...eudo_class.htm

And you said, "when you click on "Your Links", it should" open the
sub-menu. I don't think *clicking*, as you've listed it here, will do
anything for you. If you meant *hover*, then I'd say "fine," but point
you back to my previous paragraph.

I'm also not so convinced about your selectors with 3 levels of ul in
them, but maybe you've tested them and they're fine.

HTH.
--
John