<p>This page displays beautifully in firefox but i get all kinds of problems when testing the site in opera or internet explorer, mostly with the menu. I would like to know what techniques have caused this and how to avoid them. </p>

<p><a href="http://www.jkhbdesign.se/" rel="nofollow noreferrer">http://www.jkhbdesign.se/</a></p>

<p>Edit 2: Here are some screenshots of some specific problems</p>

<p>The dropdown as it should look:</p>

<p><a href="http://nibbo.se/slask/correct.png" rel="nofollow noreferrer">alt text http://nibbo.se/slask/correct.png</a></p>

<p>The way it looks in IE 7:</p>

<p><a href="http://nibbo.se/slask/dropdownie.png" rel="nofollow noreferrer">alt text http://nibbo.se/slask/dropdownie.png</a></p>

<p>The way it looks in Opera:</p>

<p><a href="http://nibbo.se/slask/dropdownopera.png" rel="nofollow noreferrer">alt text http://nibbo.se/slask/dropdownopera.png</a></p>

At the very least you are going to have to deal with the fact that the CSS :hover is not supported in IE for any tag except the anchor tag.  You'll need to use onmouseover, onmouseout in IE to accomplish the same thing.  Or change the li:hover to an a:hover but that would be a bigger overhaul of your design I think.
Specifically, CSS like this:
```
```
ul.menu li:hover ul.submenu {
background:white none repeat scroll 0 0;
border:1px solid #A6A6A6;
display:block;
margin-left:-25px;
margin-top:23px;
padding:2px 0;
position:absolute;
}
```
```
Is not going to work properly in Internet Explorer.  I don't know about Opera.