Dropdown menu acting weird in IE 9 - html

Question

We have made a dropdown menu for our website and we just have to try it out in different browsers. The dropdown menu works flawlessly in Chrome and Firefox, but in Internet Explorer 9
it acts weird. Here's the problem: Whenever you hover inbetween the space between li's the primary dropdown list shows up. Here's the html code.
<nav>
<ul>
<li class="mainLi"> Matematik
<ul>
<li>Geometri</li>
<li>Algebra</li>
<li>Statistik</li>
</ul>
</li>
<li class="mainLi"> C#
<ul>
<li>Variabler</li>
<li>Villkor</li>
<li>Upprepning</li>
</ul>
</li>
<li class="mainLi"> HTML
<ul>
<li>Taggar</li>
<li>CSS</li>
</ul>
</li>
</ul>
</nav>
Here's the CSS:
.mainLi {
margin-left: 40px;
}
nav ul li {
border-right: 0px solid black;
border-left: 0px solid black;
float: left;
}
nav ul ul {
display: none;
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
margin-left: 0%;
}
nav ul li:hover > ul {
display: inline;
}
nav ul ul li a {
color: #fff;
font-size: 21px;
padding: 0.5px 5px;
text-align: center;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
border-right: 0;
border-left: 0;
position: relative;
list-style-type: none;
top: 100%;
}
nav ul li a {
display: block;
text-decoration: none;
color: black;
font-size: 25px;
}
nav > ul > li:hover > a {
display: block;
}
nav > ul > li:hover {
background: rgb(183,208,226); /* Old browsers */
}
JS Fiddle:
http://jsfiddle.net/K5JGE/

Answer 1

Here is the Solution.
The HTML:
<nav>
<ul>
<li class="mainLi"> Matematik
<ul>
<li>Geometri</li>
<li>Algebra</li>
<li>Statistik</li>
</ul>
</li>
<li class="mainLi"> C#
<ul>
<li>Variabler</li>
<li>Villkor</li>
<li>Upprepning</li>
</ul>
</li>
<li class="mainLi"> HTML
<ul>
<li>Taggar</li>
<li>CSS</li>
</ul>
</li>
</ul>
</nav>
The CSS:
.mainLi {
margin-left: 40px;
}
nav ul li {
border-right: 0px solid black;
border-left: 0px solid black;
float: left;
position:relative;
}
nav ul ul {
display: none;
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
margin-left: 0%;
}
nav ul li:hover > ul {
display: inline;
}
nav ul ul li a {
color: #fff;
font-size: 21px;
padding: 0.5px 5px;
text-align: center;
position:relative;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
border-right: 0;
border-left: 0;
position: relative;
list-style-type: none;
top: 100%;
}
nav ul li a {
display: block;
text-decoration: none;
color: black;
font-size: 25px;
}
nav > ul > li:hover > a {
display: block;
}
nav > ul > li:hover {
background: rgb(183,208,226); /* Old browsers */
}
You just needed to position the child elements accordingly. Thats it.
Hope this Helps.

Answer 2

Also if you take the nav ul ul top:100%; off, it will work too.

Answer 3

That one is working for sure #Nathan Lee.
Aswell you can use this "Template" or whatever you want to call it and make it to your own.
Well, that's what I always do!
DropDownMenu
It's what I use from PSDCenter. (from George Orsmond)
Hope this works good for you too!

Answer 4

Add position: relative; in nav ul li.