kunert0345: menü klappt mit "active" auf aber nicht mit "focus".

hallo,

problem: css menü klappt mit "active" aber sobald ich das mit "focus" versuche damit es offen bleibt klappt es zussamen.

frage: was kann ich tun damit das menü offen bleibt.

anmerkung: ich versuche gezielt auf javascript zu verzichten und es ist mir egal ob der IE-explorer damit problehme hatt.

seite mit "li:active"

<html>  
 <head>  
<!-- USED BUGDETECTION PROGRAMMS: HTML= http://validator.w3.org/ ; CSS=  http://jigsaw.w3.org/css-validator/validator.html.en ; JavaScript= http://developer.netscape.com/docs/manuals/jsdebug/index.htm -->  
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
  <meta name="rights" content="MW-PRUDUCTION, Zef">  
  <meta name="author" content="Zef, CO">  
  <meta name="description" content="...">  
  <meta name="robots" content="noindex">  
  <meta name="robots" content="nofollow">  
  <meta http-equiv="expires" content="0">  
  <meta name="DC.creator" content="Zef">  
  <meta name="DC.publisher" content="MW-PRODUCTION">  
  <meta name="DC.language" content="de">  
  <meta name="DC.rights" content="MW-PRUDUCTION, Zef">  
  <link rel="shortcut icon" href="data/1.png">  
  <title>XD</title>  
  <style type="text/css">  
   body {  
    margin:0; padding:0;  
    background-color:#000000;  
    font-family:Courier New; text-transform:uppercase;  
   }  
   * {  
     color:#00FF00;  
   }  
   div#aa {  
    font-weight:bold;  
    float:left; width:15%;  
    list-style:none;  
    }  
   div#aa a {  
    display:block;  
    text-decoration:none;  
    }  
   div#aa a:hover {  
    background-color:#404040;  
    }  
   div#aa a:focus {  
    background-color:#00FF00; color:#000000;  
    }  
   div#aa li p {  
    display:none;  
    }  
   div#aa li hr {  
    display:none;  
    }  
   div#aa li:active p {  
    display:block;  
    margin:0;  
    border-bottom:solid;  
    border-width:thin;  
    border-color:#000000;  
    background-color:#001400;  
    }  
   div#aa li:active hr {  
    display:block;  
    margin:0;  
    border-style:solid;  
    }  
   iframe {  
    width:83%; height:100%;  
    border-style:solid; border-width:thick;  
    border-top:none; border-bottom:none; border-right:none;  
    }  
  </style>  
 </head>  
 <body>  
  <div id="aa">  
   <li><a href="home/index.html" target="iframe">home</a>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <hr>  
   </li>  
   <li><a href="video/index.html" target="iframe">video</a>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <hr>  
   </li>  
   <li><a href="music/index.html" target="iframe">music</a>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <p><a href="">123</a></p>  
    <hr>  
   </li>  
   <li><a href="forum/index.html" target="iframe">forum</a></li>  
   <li><a href="chat/index.html" target="iframe">chat</a></li>  
   <li><a href="download/index.html" target="iframe">download</a>  
    <p><a href="">123</a></p>  
    <hr>  
   </li>  
  </div>  
  
  <iframe src="home/index.html" name="iframe">  
    <p>IFRAME ERROR</p>  
  </iframe>  
  
 </body>  
</html>
  1. problem: css menü klappt mit "active" aber sobald ich das mit "focus" versuche damit es offen bleibt klappt es zussamen.

    active ist der Zustand während des Mouseclicks.
    Meinst du vielleicht hover?
    focus funtioniert nicht bei CSS only, weil der Focus, der anderes sichtbar werden lässt, verloren geht, sobald man mit der Tabtaste auf ein anderes Element fokusiert.
    Gerade dazu müsstest du aber onfocus quasi display:block, bzw eine Klasse, die dies beschreibt via JS setzen.

    mfg Beat

    --
    Woran ich arbeite:
    X-Torah
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    1. ok, danke

      schade das es nicht alein mit css geht.
      ich werde mal sehen wie ich die menü führung anders regeln kann (mache trotzdem einen bogen um JS)

  2. hi,

    neben dem von Beat erwähntem;

    https://forum.selfhtml.org/?t=181929&m=1203936

    mfg

    --
    echo '<pre>'; var_dump($Malcolm_Beck`s); echo '</pre>';
    array(2) {
      ["SELFCODE"]=>
      string(74) "ie:( fl:) br:> va:? ls:? fo:) rl:| n4:# ss:{ de:? js:} ch:? sh:( mo:? zu:("
      ["Aight"]=>
      string(?) "I Have a Dream"
    }