Chris: Dropdown Menü Problem

Beitrag lesen

SELF-Forum

Dropdown Menü Problem

Chris
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln