• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

dropdown menü problem

J

JanK411

Neues Mitglied
Hallo...
ich habe mir mit css und html ein dropdown menü erstellt und habe jetzt ein kleines Problem:
immer, wenn ich meine Maus auf einen "aufklappenden" Link halte, wird der Text darunter verschoben.
Meine Frage: Wie kann man das menü über der darunterliegenden Text "aufklappen" lassen?

mein Html/CSS code:
Code: 
<html>
<head>
<title>JanK411 Home</title>
                 
                 <style type="text/css">
                  #navi, #navi ul {
                  list-style-type:none; margin:0; padding:0;
                  }

                  #navi li { width:128px; float:left; }

                  #navi li ul { display:none; }
                    #navi li:hover ul { display:block; }
                 </style>

</head>
<body>
<ul id="navi">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a>
    <ul>
      <li><a href="#">Link a</a></li>
      <li><a href="#">Link b</a></li>
      <li><a href="#">Link c</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a>
    <ul>
      <li><a href="#">Link d</a></li>
      <li><a href="#">Link e</a></li>
      <li><a href="#">Link f</a></li>
    </ul>
  </li>
  <li><a href="#">Link 4</a></li>
</ul>
<br><br>

         <p>Dieser Text verschiebt sich, wenn ich auf mit meiner Maus über "Link 1" oder "Link 2" fahre.</p>

</body>
</html>
Danke schon mal im Voraus
JanK411
 
Zuletzt bearbeitet:
Zusätzlich zu o.g. Tipp auch noch mit "left" und "top" oder "right" und "bottom" die gewünschte Position sowie mit "width" die Breite des Untermenüs angeben. Der "z-index" sollte auch nützlich sein.
 
Hey Super
jetzt funktioniert es schon mal, aber klappt es nicht mehr nach unten auf, sondern nach nach Rechts.
und soll in diesem Fall der "z-index" angewand werden?
 
Super
jetzt funktioniert alles.
hab das ganze jetzt so gelöst:
Code: 
<html>
<head>
<title>JanK411 Home</title>
                 <style type="text/css">
                  #navi, #navi ul {
                  list-style-type:none; margin:0; padding:0;
                  }

                  #navi li { width:128px; float:left; }

                  #navi li ul { display:none; }
                    #navi li:hover ul { display:block; }

                  body { behavior:url("csshover.htc"); }

                  #divid1
                  {
                  position:absolute;
                  z-index:1; }
                 </style>

</head>
<body>
<ul id="navi">
<div id="divid1" class="examplediv">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a>
    <ul>
      <li><a href="#">Link a</a></li>
      <li><a href="#">Link b</a></li>
      <li><a href="#">Link c</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a>
    <ul>
      <li><a href="#">Link d</a></li>
      <li><a href="#">Link e</a></li>
      <li><a href="#">Link f</a></li>
    </ul>
  </li>
  <li><a href="#">Link 4</a></li>
</ul>
</div>
<br>

         <p>Dieser Text verschiebt sich, wenn ich auf mit meiner Maus über "Link 1" oder "Link 2" fahre.</p>

</body>
</html>

Vielen Dank noch mal!!!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben