Tuesday
Jan 22nd, 2010, 01:58 AM
I have no idea. I searched and searched for info on this issue but I can only find it on the reverse scenario where drop-downs won't work in IE, etc.
Here's the css:
#menu {
position: relative;
top: -70px;
width: 180px;
height: 208px;
background-color: white;
margin-left: 60px;
z-index: 7000;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
padding-right: 10px;
text-align: right;
display: block;
height: 35px;
padding-top: 25px;
}
#menu ul li a {
color: #7D181B;
font-size:16px;
letter-spacing: 0px;
font-family: "Lucida Console", Monaco, monospace;
}
#menu ul ul {
position: relative;
top: -23px;
left: 180px;
display: none;
background-color: white;
width: 280px;
}
#menu ul ul li {
height: 25px;
padding: 0px;
margin: 0px;
}
#menu ul li:hover ul {
position: relative;
display: block;
background-color: #7D181B;
}
The html is like this:
<div id="menu">
<ul>
<li><a href="#">Menu Link</a></li>
<ul><li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li></ul>
<li><a href="#">Menu Link</a></li>
<ul><li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
</ul>
<li><a href="#">Menu Link</a></li>
<ul><li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
</ul>
</ul>
</div>
Anyone know what I'm doing wrong?
Here's the css:
#menu {
position: relative;
top: -70px;
width: 180px;
height: 208px;
background-color: white;
margin-left: 60px;
z-index: 7000;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
padding-right: 10px;
text-align: right;
display: block;
height: 35px;
padding-top: 25px;
}
#menu ul li a {
color: #7D181B;
font-size:16px;
letter-spacing: 0px;
font-family: "Lucida Console", Monaco, monospace;
}
#menu ul ul {
position: relative;
top: -23px;
left: 180px;
display: none;
background-color: white;
width: 280px;
}
#menu ul ul li {
height: 25px;
padding: 0px;
margin: 0px;
}
#menu ul li:hover ul {
position: relative;
display: block;
background-color: #7D181B;
}
The html is like this:
<div id="menu">
<ul>
<li><a href="#">Menu Link</a></li>
<ul><li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li></ul>
<li><a href="#">Menu Link</a></li>
<ul><li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
</ul>
<li><a href="#">Menu Link</a></li>
<ul><li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
<li><a href="#">Submenu Link</a></li>
</ul>
</ul>
</div>
Anyone know what I'm doing wrong?