dropdown fenster soll durch anklicken bleiben

Hallo

Ich habe ein dropdownfenster gemacht. Allerdings geht das durch "hover" auf und sobald man weggeht geht es zu. Allerdings m�chte ich, anstatt hover, dass man draufklickt und es dann aufgeht und es dann auch aufbleibt. Das ganze muss leider ohne java erfolgen. Kann mir jemand helfen ?

Code:

<meta http-equiv="X-UA-Compatible" content="IE=9">

<style type="text/css">

body {font-family:arial; font-size:200px; behavior:url("csshover.htc"); }
div {cursor:default;}
a {text-decoration:none; color:#000000;}

ul {margin:50px; padding:50px; list-style-type:none;}
#menu li {float:500px; width:140px; text-align:center;}
#menu li ul{display:none; padding-top:7px;}
#menu li:hover ul{display:block;}
#menu li li li {background-color:#2F2D49; border-bottom:1px solid #FFFFFF;}
#menu li li li a{color:#FFFFFF;}
#menu li li li:visited {background-color:#232323;}




.sidebar .menu-box { border-top: none; border-radius: 7px 0 0 0; }
.sidebar .menu-box { padding-top: 1px }
.sidebar .menu-box .widget-title { margin-top: 0 }
.sidebar .graphic-box img,
.sidebar .graphic-box a { display: block; border: none; }
.sidebar .widget .widget-content { position: relative; border-top: 1px solid #b6b6b6; min-height: 30px; padding: 17px 17px; color: #333333; font-size: 12px; }
.sidebar .widget .widget-content2 { position: relative; border-top: 1px solid #b6b6b6; min-height: 30px; padding: 7px 17px; color: #333333; font-size: 12px; }
.sidebar .nav-widget ul { list-style-type: none; padding: 0; margin: 1px -8px 10px; }
.sidebar .nav-widget ul li { display: block; margin: 0; padding: 0; background: url(bg_dot_ul.png) no-repeat 7px 12px; }
.sidebar .nav-widget ul li a { display: block; color: #333333; font-size: 12px; padding: 7px 22px; border-bottom: 1px dotted #b6b6b6; }
.sidebar .nav-widget ul li a:hover { color: #b6b6b6 }
.search-placeholder { float: right; margin: 40px 17px 22px; width: 265px; height: 28px; }
.search {width:325px; height:28px; background-image:url(http://s14.directupload.net/images/140414/e8t3545e.png); margin:18px -50px 0; background-repeat:no-repeat; background-position:top;}
.search input {border:none;}
input.search_feld {background:none; color:#666; width:205px; height:20px; margin-top:5px; margin-left:40px;}
input.search_button {background:none; width:50px; height:30px; margin-left:250px; cursor:pointer; margin-top: -25px;}
.artikelbilder { position: relative; width:700px; border: none; float:left; background-repeat:no-repeat; background-position:top center; margin-bottom:20px;}
.thumbnail img { border: 5px solid #ffffff; margin-top: 410px;}
.thumbnail:link {text-decoration:none;}
.thumbnail:hover { background-color: transparent; text-decoration:none;}
.thumbnail span { position: absolute; left: -1000px; border: none; visibility: hidden; text-decoration:none;}
.thumbnail span img { padding:0px; border:none;}
.thumbnail:hover span { visibility: visible; top: -410px; left: 85px; z-index: 100;}
.style1 {font-family:Arial; font-size:12px; sans-serif; color: #333333;}
.logoFont { font-size: 22px; line-height: 30px; color: #333333; }
#master-header .site-title { margin: 65px 20px; float: left; font-size: 22px; line-height: 30px; color: #333333; }
#master-header .slogan { position: relative; float: left; margin: 55px 10px; padding: 10px 7px; font-size: 12px; font-weight: normal; border-left: 2px solid #d7d7d7; }
#master-header .slogan:before { content: " "; display: block; height: 100%; width: 1px; background: #ffffff; position: absolute; left: -2px; top: 0; }
</style>
</style>







</div>
<div class="col-left sidebar">
<div class="widget text-box">

<div class="widget-content2">
<div class="nav-widget" id="aside-nav">
<!-- CATEGORY START -->
<ul>
<li>





        <ul id="menu">

            <li id="angebote">Da soll man draufklicken  </a>
                        <ul>
                                <li><a href="#" title="Angebot 1">Angebot 1</a></li>
                                <li><a href="#" title="Angebot 2">Angebot 2</a></li>
                                <li><a href="#" title="Angebot 3">Angebot 3</a></li>

                        </ul>
                  </li>
                </ul>
</li>



</ul>

<!-- CATEGORY END -->
</div>
</div>
</div>
</ul>

Habe es jetzt so gemacht

Code:

  <meta http-equiv="X-UA-Compatible" content="IE=9">

<style type="text/css">



 .menu {

    position: relative;
    border-top: 1px solid #ffffff;
    border-bottom: 50px;
    min-height: 70px;
    padding: 7px 17px;
    color: #333333;
    font-size: 12px;
}
.menu:before {
    content: "Thermodrucker";
    border-left: "30px"
}
.menu:focus {
    pointer-events: none;
}
.menu:focus .menu-content {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}
.menu-content {
    position: absolute;
    z-index: 1;
    width: 190px;
    height: auto;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s;
}


 </style>







<div tabindex="0" class="menu">
    <ul class="menu-content">
        <li><a href="light.html">Test</a></li>
        <li><a href="standart.html" >Test2</a></a></li>
        <li><a href="pro.html" >Test3</a></a></li>
    </ul>

</ul>
<!-- CATEGORY END -->
</div>
</div>
</div>

allerdings, sobald ich auf einen link klicke, geht das ge�ffnete fenster weg und er geht nicht auf die Seite, sondern bleibt auf der aktuellen Seite.

Habe gerade gesehen, dass das problem nur mit dem IE auftritt.