untermenü geöffnet lassen

[tropenberta]

hi leuts

ich hab eine navigation nachgebaut, die auch super funktioniert. jetzt ist es aber so, das wenn ich mit der maus über ein element fahre sich die untermenüs öffnen, geh ich mit der maus woanders hin schliesst sich das untermenü wieder. ich möchte aber wenn der user auf das element klickt das das untermenü geöffnet bleibt. nach möglichkeit würde ich es gerne mit css lösen, aber wenn nicht anders geht nehm ich auch ne js lösung. danke.

html:

  
  
      <ul class="navimenu">  
       <li><a href="#">Unternehmen</a>  
        <ul>  
         <li><a href="#">Startseite</a></li>  
         <li><a href="#">Geschichte</a></li>  
         <li><a href="#">Team</a></li>  
        </ul>  
       </li>  
      </ul>  
  

css:

  
.navimenu, .navimenu ul, .navimenu li, .navimenu a {  margin: 0;  
                                                      padding: 0;  
                                                      border: none;  
                                                      outline: 5; }  
  
.navimenu { height: 40px;  
            width: 170px;  
            background: #4c4e5a;  
            background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);  
            background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);  
            background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);  
            background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);  
            background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);  
            -webkit-border-radius: 5px;  
            -moz-border-radius: 5px;  
            border-radius: 5px;  
            -webkit-border-radius: 5px;  
            -moz-border-radius: 5px;  
            border-radius: 0px; }  
  
.navimenu li { position: relative;  
               list-style: none;  
               float: left;  
               display: block;  
               height: 40px; }  
  
  
  
  
.navimenu li a { display: block;  
                 padding: 0 14px;  
                 margin: 6px 0;  
                 line-height: 28px;  
                 text-decoration: none;  
                 border-left: 1px solid #393942;  
                 border-right: 1px solid #4f5058;  
                 font-family: Helvetica, Arial, sans-serif;  
                 font-weight: bold;  
                 font-size: 13px;  
                 color: #f3f3f3;  
                 text-shadow: 1px 1px 1px rgba(0,0,0,.6);  
                 -webkit-transition: color .5s ease-in-out;  
                 -moz-transition: color .2s ease-in-out;  
                  -o-transition: color .2s ease-in-out;  
                 -ms-transition: color .2s ease-in-out;  
                  transition: color .2s ease-in-out; }  
  
.navimenu li:first-child a { border-left: none; }  
  
.navimenu li:last-child a{ border-right: none; }  
  
.navimenu li:hover > a { color: #8fde62; }  
  
.navimenu li:hover > ul { opacity: 1; }  
  
.navimenu li:hover > ul li { height: 36px;  
                             overflow: hidden;  
                             padding: 0; }  
  
.navimenu ul li a { width: 120px;  
                    padding: 4px 0 4px 30px;  
                    margin: 0;  
                    border: none;  
                    border-bottom: 0px solid #353539; }  
  
.navimenu ul li:last-child a { border: none; }  
  
.navimenu ul li { height: 0;  
                  overflow: hidden;  
                  padding: 0;  
                  -webkit-transition: height .25s ease .1s;  
                  -moz-transition: height .25s ease .1s;  
                  -o-transition: height .25s ease .1s;  
                  -ms-transition: height .25s ease .1s;  
                  transition: height .25s ease .1s; }  
  
.navimenu ul { position: absolute;  
               top: 0px;  
               left: 170px;  
               opacity: 0;  
               background: #1f2024;  
               -webkit-border-radius: 0 0 5px 5px;  
               -moz-border-radius: 0 0 5px 5px;  
               border-radius: 0 0 5px 5px;  
               -webkit-transition: opacity .25s ease .1s;  
               -moz-transition: opacity .25s ease .1s;  
               -o-transition: opacity .25s ease .1s;  
               -ms-transition: opacity .25s ease .1s;  
               transition: opacity .25s ease .1s; }  
  
.navimenu li:active > ul li { height: 36px;  
                             overflow: hidden;  
                             padding: 0; }