IE navigation dropdown doesn't display as it should - html

Question

I've created a drop down navigation in html. I then tested it with different browser such as chrome, firefox, opera and IE. The only problem I see is that the navigation doesn't display right in IE.
HTML:
<div id="nav_bar">
<ul id="nav">
<li>Home</li>
<li>Krazie
<ul>
<li>Colour</li>
<br />
<li>Black 'N' Grey</li>
</ul>
</li>
<!-- End of Krazie links -->
<li>Stacy
<ul>
<li>Colour</li>
<br />
<li>Black 'N' Grey</li>
</ul>
</li>
<!-- End of stacy links -->
<li>Matt
<ul>
<li>Colour</li>
<br />
<li>Black 'N' Grey</li>
</ul>
</li>
<!-- End of matt links -->
<li>Contact</li>
</ul>
</div>
CSS:
#nav
{
margin-top:-0px;
background:rgb(108,108,108);
position:fixed;
top:0;
left:0;
z-index:10;
width:100%;
z-index:9003;
height:32px;
list-style:none;
color:#FFF;
}
#nav li
{
float: left;
list-style:none;
}
#nav li a
{
display: block;
height:2em;
line-height:2em;
padding:0px 10px;
text-decoration:none;
list-style:none;
color:#FFF;
}
#nav ul
{
padding:0px;
margin-left:-20px;
background:rgb(108,108,108);
position:absolute;
display:none;
z-index:9003;
list-style:none;
}
#nav ul li a
{
padding:-50px;
width:110px;
list-style:none;
}
#nav li:hover ul
{
display:block;
list-style:none;
}
#nav > li:hover > a
{
background:rgb(108,108,108);
}
#nav ul li:hover a
{
background:rgb(48,48,50);
}
The bit that doesn't display properly is the actual links that you see when you put the mouse over them. This is how it shows on other browser like chrome: http://grab.by/e5ik
but in IE it displays as: http://grab.by/e5im

Answer 1

Your codes seems too complicated to get your work done.
Btw, please remove <br /> in html.
Then, add the following CSS: (between #nav ul and #nav ul li a)
#nav ul li {
clear: both;
}
(tested in IE8)
Please check again in the browsers whether any error occurs.

Answer 2

change this-
#nav ul li a
{
padding:-50px;
width:110px;
list-style:none;
}
#nav li:hover ul
{
display:block;
list-style:none;
}
#nav > li:hover > a
{
background:rgb(108,108,108);
}
#nav ul li:hover a
{
background:rgb(48,48,50);
}
to this-
#nav ul li a
{
padding:-50px;
width:110px;
list-style:none;
display:block
}
#nav a:hover ul
{
display:block;
list-style:none;
}
#nav > li > a:hover
{
background:rgb(108,108,108);
}
#nav ul li a:hover
{
background:rgb(48,48,50);
}
sometimes ie doesn't recognize hovering over elements except a elements.