Bugs in IE: dotted border and z-index

Question

Hi,

Why does IE (I am on IE7) behave so odd when comes to dotted line and z-index in the examples below?

http://quack-project.net/tmp/4/index.php

Is there any method to fix this or have I coded the css incorrectly??

first example,

<div style="
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    border-top: 2px solid #000;
    border-bottom: 2px dotted red;
    width:100px;
    height:100px;
    background-color:#fff;

    z-index:100;
    position:relative;
    ">

</div>

<div style="
    border: 2px solid #000;
    width:200px;
    height:100px;
    background-color:#ccc;

    z-index:99;
    position:absolute;
    margin-top:-2px;
    ">  
</div>

second example,

<style>
#menu {
    overflow:visible;
    }

#menu li {
    float:left;
    border: 0px dotted blue;
    position:relative;  
}

#menu a {
    display: block;
    }

/*level 1*/

#menu  > ul > li {
    float:left;
    }

#menu > ul > li > a {
    padding:10px;
    background-color:#ffffff;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    border-top: 2px solid #000;
    border-bottom: 2px dotted red;
    position:relative;
    }

/*level 2*/

#menu > ul > li > ul {
    position: absolute;
    margin-top:-2px;
    z-index:99;
    border: 2px solid green;
    display:block;
}

#menu > ul > li > ul > li {
    float:none;
}

#menu > ul > li > ul > li > a {
    padding:10px;
    width:200px;
    border-bottom: 2px dotted green;
}

</style>

<div id="menu">

<ul>    
    <li><a href="#" style="z-index:100;">Menu 1</a>
        <ul>    
            <li><a href="#">Sub Menu 1.1</a></li>
            <li><a href="#">Sub Menu 1.2</a></li>
            <li><a href="#">Sub Menu 1.3</a></li>
        </ul>
    </li>

    <li><a href="#" style="z-index:1;">Menu 2</a></li>

    <li><a href="#" style="z-index:1;">Menu 3</a></li>

</ul>   


</div>

these are what I mean in pictures,

many thanks, Lau