CSS Navigation menu collaspe in IE, anyone can help?

The CSS Navigation menu on my new site works fine in all browsers other than the Internet Explorer.

I am showing you the code-

<style type="text/css">
<!--
#catnav{
position: relative;
list-style-type: none;
list-style-position: outside;
margin:0;
width:956px;
float: left;
z-index: 4;
margin:17px 10px 5px 17px;
}
.catnav_wrapper{
}
#catnav li a{
display:block;
float:left;
padding:13px 10px 13px 10px;
width:114px;
border: none;
text-decoration: none;
line-height: 17px;
outline: none;
min-height:30px;
}
#catnav li a strong{
display:block;
font-weight: bold;
font-size: 16px;
}
#catnav li a span{
display:block;
font-size: 10px;
}
#catnav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
z-index:5;
}
#top #catnav ul a{
line-height:29px;
font-size: 12px;
cursor: pointer;
}
#top #catnav li{
float:left;
position:relative;
z-index:20;
margin-top:0;
}
#top #catnav li li{
border-right:none;
margin-top:0;
}
#top #catnav ul {
display:none;
position:absolute;
top:57px;
width:172px;
left:-2px;
}
#top #catnav li ul a{
width:150px;
height:auto;
float:left;
text-align:left;
padding:0 10px;
}
#top #catnav ul ul{
top:auto;
border-top:none;
}
#top #catnav li ul ul {
left:171px;
top:-1px;
}
#top #catnav li:hover ul ul, #top #catnav li:hover ul ul ul,#top  #catnav li:hover ul ul ul ul{
display:none;
}
#top #catnav li:hover ul, #top #catnav li li:hover ul, #top #catnav li li li:hover ul, #top #catnav li li li li:hover ul{
display:block;
}
#top #catnav li ul a{
border-top:none;
}
#top #catnav .noborder, #top #catnav .noborder a{
border:none;
}
#catnav li{
border-right:1px solid #fff;
}
#catnav li a{
color:#666666;
border-right:1px solid #aaa;
text-shadow:1px 1px 0px #fff;
}
#catnav .current a, #catnav li a:hover, #catnav .currentli_item a{
color:#464646;
}
#top #catnav li ul a{
border:1px solid #aaa;
border-top:none;
color:#666;
background: #f9f9f9;
}
#top #catnav li ul a:hover{
background:#fff;
color:#464646;
}
#top #catnav li ul {
border-top:1px solid #aaa;
}

-->
</style>
<div id='catnav_wrapper'>
<!-- Navigation for Categories starts here -->
<ul id='catnav'><li class='li_item'><a class='navlink ' href='#'><strong>Tech News</strong><span>Apple, Microsoft & more</span></a></li>
<li class='li_item'><a class='navlink ' href='#'><strong>Browser War</strong><span>Mozilla, Google, etc</span></a></li>
<li class='li_item'><a class='navlink ' href='#'><strong>Adobe</strong><span>Company News</span></a></li>
<li class='li_item'><a class='navlink ' href='#'><strong>Community</strong><span>User submitted</span></a></li>
<li class='li_item'><a class='navlink ' href='#'><strong>Illustrator</strong><span>Vector Downloads</span></a></li>

<li class='li_item'><a class='navlink ' href='#'><strong>Photoshop</strong><span>Tutorials & News</span></a></li>
<li class='li_item noborder'><a class='navlink ' href='#' style='height: 34px; border:none;'><strong>Featured</strong><span>Hot
stuff in here</span></a></li></ul>
<!-- end catnav_wrapper: -->

Code (markup):

I would highly appreciate if some one fix the IE problem for me.

 

What exactly is the problem? What happens in IE?

 

It totally collapse.


you can see the problem live by visiting this site

 http://glazemoo.blogspot.com

Code (markup):

 

in you list,you didn't close your <li> tags

<ul id="catnav">
      <li class="li_item">.....</li>
</ul>

Code (markup):

all the browsers correct that by themselves when they display the page, except IE7 and below.