Chris: Dropdown Menü Problem

Halli hallo Leute,

Ich hab ein Problem mit meinem Dropdownmenu.
Ich habe mir eines angeschaut, siehe "http://javascript-array.com/scripts/simple_drop_down_menu/".

Eingebaut alles ok.

Doch nun will ich es über ein Bild legen, doch das klappt garnicht. Habe es mit Z-index im CSS versucht aber ohne richtigen Erfolg. Die ausklappenden Felder sind vor dem Bild, aber die Menü Felder selbst nicht :(.

Kann mir Jemand helfen?

Grüße Chris

  1. Hi,

    Kann mir Jemand helfen?

    nein. Grund: Aufgrund Deiner Beschreibung ist das Problem nicht reproduzierbar. Ein nicht reproduzierbares Problem ist ein nicht lösbares Problem.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. ok.. sorry dann versuch ich das mal genau darzustellen.

      Also:

      Für das Menu benutze ich folgenden Code:

      HTML:
      <html>
      <body>
      <div class="Head1">
      <img src="Head1.png" height="210px" width="1000px" >
      </div>
      <ul id="sddm">
          <li><a href="#"
              onmouseover="mopen('m1')"
              onmouseout="mclosetime()">Home</a>
              <div id="m1"
                  onmouseover="mcancelclosetime()"
                  onmouseout="mclosetime()">
              <a href="#">HTML Drop Down</a>
              <a href="#">DHTML Menu</a>
              <a href="#">JavaScript DropDown</a>
              <a href="#">Cascading Menu</a>
              <a href="#">CSS Horizontal Menu</a>
              </div>
          </li>
          <li><a href="#"
              onmouseover="mopen('m2')"
              onmouseout="mclosetime()">Download</a>
              <div id="m2"
                  onmouseover="mcancelclosetime()"
                  onmouseout="mclosetime()">
              <a href="#">ASP Dropdown</a>
              <a href="#">Pulldown menu</a>
              <a href="#">AJAX Drop Submenu</a>
              <a href="#">DIV Cascading Menu</a>
              </div>
          </li>
          <li><a href="#">Order</a></li>
          <li><a href="#">Help</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
      <div style="clear:both"></div>
      </body>
      </html>

      CSS:

      .Head1{

      position:absolute;
        left:0px;
        top:45px;
        z-index:1;
      }

      #sddm
      { margin: 0;
       padding: 0;
       z-index: 2}

      #sddm li
      { margin: 0;
       padding: 0;
       list-style: none;
       float: left;
       font: bold 11px arial}

      #sddm li a
      { display: block;
       margin: 0 1px 0 0;
       padding: 4px 10px;
       width: 60px;
       background: #5970B2;
       color: #FFF;
       text-align: center;
       text-decoration: none}

      #sddm li a:hover
      { background: #49A3FF}

      #sddm div
      { position: absolute;
       visibility: hidden;
       margin: 0;
       padding: 0;
       background: #EAEBD8;
       border: 1px solid #5970B2}

      #sddm div a
       { position: relative;
        display: block;
        margin: 0;
        padding: 5px 10px;
        width: auto;
        white-space: nowrap;
        text-align: left;
        text-decoration: none;
        background: #EAEBD8;
        color: #2875DE;
        font: 11px arial}

      #sddm div a:hover
       { background: #49A3FF;
        color: #FFF}
      Javascript:

      var timeout = 500;
      var closetimer = 0;
      var ddmenuitem = 0;

      // open hidden layer
      function mopen(id)
      {
       // cancel close timer
       mcancelclosetime();

      // close old layer
       if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

      // get new layer and show it
       ddmenuitem = document.getElementById(id);
       ddmenuitem.style.visibility = 'visible';

      }
      // close showed layer
      function mclose()
      {
       if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
      }

      // go close timer
      function mclosetime()
      {
       closetimer = window.setTimeout(mclose, timeout);
      }

      // cancel close timer
      function mcancelclosetime()
      {
       if(closetimer)
       {
        window.clearTimeout(closetimer);
        closetimer = null;
       }
      }

      // close layer when click-out
      document.onclick = mclose;

      Soo nun wenn man das alles eingefügt hat hat man ein Menu oben links im Bildschirm. Problem ist jetzt das ich das Menu nicht verschieben kann.
      Habs im CSS versucht mit, top:50px; usw. kein Erfolg.

      Wenn man es im HTML einfach mit <br> verschiebt, habe ich das Problem das es hinter einem Bild liegt und sich mit dem Z-index nicht vor das Bild verschieben lässt.

      Bild ist hier zu finden:
      http://img91.imageshack.us/my.php?image=head1vk7.png

      Ich hoffe jetzt gehts besser

      Grüße Chris

  2. @@Chris:

    Ich hab ein Problem mit meinem Dropdownmenu.

    Ja. Und zwar ein viel bedeutsameres als das, was du hier ansprichst.

    Ich habe mir eines angeschaut, siehe "http://javascript-array.com/scripts/simple_drop_down_menu/".

    Eingebaut alles ok.

    Nein, nichts OK. Das Menü ist wertlos für Clients, die kein JavaScript ausführen. Und das sind nicht nur Browser etlicher menschlicher Besucher, sondern auch Besucher, denen du bestimmt Zugang zu deinen Inhalten ermöglichen willst. [DIALOG-ROBOT]

    Eine Navigation muss ohne JavaScript möglich sein.

    Zur Realisierung siehe <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=CSS-basierte Navigationsleisten> [SELFHTML] und CSS only drop-down menu [Stu Nicholls].

    Live long and prosper,
    Gunnar

    --
    Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)