I have a website with a css drop menu, which works fine on chrome and firefox, but in IE the drop menu doesn't display.... it's almost like it doesn't exist at all...

I've tried multiple times to copy some code or menus from other sites i have that do work in IE, but without success. 

Here's the html...

```
<ul id="menu">
<li><a href="http://www.manor.co.za">INTRO |</a></li>
<li><a href="guesthouse/index.php">HOME |</a></li>
<li><a href="guesthouse/accommodation/index.php">ACCOMMODATION & RATES |</a></li>
<li><a href="guesthouse/information/index.php">INFO |</a></li>
<li><a href="guesthouse/activities/index.php">ACTIVITIES |</a>
<ul class="sub-menu">
    <li><a href="guesthouse/groute/index.php">GARDEN ROUTE ACTIVITIES</a></li>
</ul>
</li>
<li><a href="guesthouse/golf/index.php">GOLF |</a></li>
<li><a href="guesthouse/news/index.php">NEWS |</a></li>
<li><a href="guesthouse/contact/index.php">CONTACT US |</a></li>
<li><a href="guesthouse/directions/index.php">DIRECTIONS |</a></li>
<li><a href="guesthouse/gallery/index.php">GALLERY</a></li>
</ul>

```

the CSS

```
/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
padding:0px 0 0px 0;
margin: 0px;
/*background-color:#9A844C;*/
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;
display:inline;

}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #573A2F;
padding: 0px;
display:inline-block;
font-size:10px;
}
ul#menu li a:hover {
text-decoration: none;
color: #000;
padding: 0px;
display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
position: relative;
padding-bottom:5px;
z-index:100001;
}
/*sub menu*/
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 20px;
left: 0;
width: 200px;
background-color:#E2D9C6;
z-index:100001;
}
ul#menu li:hover ul.sub-menu {
display:block;
z-index:100001;
}
ul#menu li ul.sub-menu:hover {
display:block;
color: #573A2F;
z-index:100001;
}

```

Any help would be greatly appreciated...