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>