Ik ben momenteel bezig met een site echter heb ik wat problemen met mijn CSS dropdown menu.
In alle browsers werkt het menu gewoon normaal behalve als ik hem in IE 9 met compatibiliteitsmodus gebruik. Hij verspring om één of andere reden naar rechts en ik kan de oorzaak maar niet vinden.
Hieronder vind je het stukje CSS en HTML waar het omgaat en een afbeelding waar het fout gaat.
Zoals het menu hoort:

Weergave in IE:

De HTML:
<div id="menu">
<ul id="menu2">
<li>
<a href="#">Menu kop</a>
<span>Sub tekst</span>
</li>
<li>
<a href="#">Menu kop</a>
<span>Sub tekst</span>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li>
<a href="#">Menu kop</a>
<span>Sub tekst</span>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li>
<a href="#">Menu kop</a>
<span>Sub tekst</span>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li>
<a href="#">Menu kop</a>
<span>Sub tekst</span>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li>
<a href="#">Menu kop</a>
<span>Sub tekst</span>
<ul>
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
</ul>
</div>
De CSS
#menu
{
margin-right:0;
margin-top: 0px;
}
#menu
{
margin-right: 0px;
margin-left:250px;
background: #27a4cd;
height: 50px;
font-family: Verdana, Geneva, sans-serif;
}
#menu a, #menu a:hover
{
text-decoration: none;
}
#menu li span
{
font-size: 11px;
color: #e3e3e3;
font-weight: normal;
padding: 20px ;
}
#menu2
{
width: auto;
}
#menu2, #menu2 ul
{
padding: 0;
margin: 0;
list-style: none;
}
#menu2 a
{
display: block;
line-height: 14px;
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
font-style: normal;
color: #FFF;
}
#menu2 li:hover
{
background: #267f8c;
cursor: pointer;
}
#menu2 li:hover span
{
color: #fff;
}
#menu2 li
{
float: left;
font-size: 15px;
font-weight: normal;
padding-bottom: 11px;
position: relative;
display: block;
}
#menu2 li ul
{
position: absolute;
display: block;
width: 188px;
left: -999em;
border: 1px solid #e7e7e7;
border-width:0px 1px;
margin-top:11px;
}
#menu2 li li
{
font-weight: normal;
margin: 0;
padding: 0;
}
#menu2 li:hover ul
{
left: auto;
background: #FFF;
}
#menu2 li ul li a
{
line-height: 32px;
color: #4a4a4a;
font-size: 12px;
width: 148px;
padding: 0 20px;
border-bottom: 2px solid #e7e7e7;
}
#menu2 a
{
display: block;
}
#menu2 li:hover
{
position: static;
}