Hi there
I've been fighting with getting this CSS-menu to do as told:
The weird thing is that it works in Firefox but not in Internet Explorer 7.0.
The other weird thing is - if I make a html file local on my computer - It works fine - but as soon as I put it in a template it doesn't work.
<STYLE type=text/css media=screen>
#menu {
width: 12px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu h2 {
border-width: 0px;
border-style: solid;
border-color: #fff #fff #fff #fff;
margin: 0;
}
#menu a {
color: #000;
background: #CCCCCC;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {
position: relative;
}
.infobox{
background-color:#eeeeee;
border:1px solid black;
margin-left:5px;
padding:5px;
min-height:80px;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
height:100px;
padding:5px;
width: 150px;
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
</STYLE>
<DIV id=menu style="MARGIN-LEFT: 5px; HEIGHT: 12px">
<UL style="POSITION: relative; TOP: -16px">
<LI>
<UL>
<LI><IMG src="/files/billeder/kamera.gif" border=0>
<UL>
<LI style="TEXT-ALIGN: left">
<DIV class=infobox>Brand:<BR>yes sir</DIV></LI></UL></LI></UL></LI></UL></DIV>
Can any one tell me whats wrong?