dropdown fenster soll durch anklicken bleiben

Mogile · 04/17/2015, 15:20

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>

Hyukisawa · 04/17/2015, 17:23

Quote:

Originally Posted by Mogile

Das ganze muss leider ohne java erfolgen. Kann mir jemand helfen ?

ich denke mal du meinst Javascript, was spricht dagegen ?

CSS:

Code:

.menu {
    background-color:grey;
    position: relative;
    display: inline-block;
}
.menu:before {
    content: "click me!";
}
.menu:focus {
    pointer-events: none;
}
.menu:focus .menu-content {
    opacity: 1;
    visibility: visible;
    
    pointer-events: auto;
}
.menu-content {
    position: absolute;
    z-index: 1;
    width: 140px;
    height: auto;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.5s;
}

HTML Code:

<div tabindex="0" class="menu">
    <ul class="menu-content">
        <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>
</div>

bsp:

Mogile · 04/21/2015, 10:35

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.