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

Css Dropdown Menu soll langsam auf gehen!?

B

Bengman

Mitglied
Hey, dieses mal ist das Problem, dass Ich ein Dropdown Menu habe, es aber ziemlich blöd aussieht, wenn es einfach so schnell aufploppt, davon kriegt man ja Kopfschmerzen. Im Internet habe Ich immer nur "Lösungen" gesehen, wo das Dropdown mit so super Befehlen, wie opacity oder visibilaty gearbeitet hat. Ich habe das aber mit display gemacht. Nun weiß Ich nicht, wie Ich das Menu aufklappen lassen kann, denn mit transition klappt es nicht. Kann einer helfen?
Code: 
section ul li> ul li { display: none; }
section ul li:hover>ul li { display: block; }
 
Werbung:
Werbung:
scbawik schrieb:
Display kann auch nicht animiert werden…
Opacity und visibility hingegen schon:
Zum Vergrößern anklicken....

Ist für ein DD Menü bestimmt nicht hilfreich.

Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu</title>

<style>
* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
}

ul  {
  float:left;
  background:#333;
   
}

ul a {
 display:block;
 padding:0.3125em; /* entspricht ca 5px */
 color:#fff;
 font-weight:bold;
 border-right:1px solid #fff;
 text-align:center;
}

ul li  {
 position:relative;   
 float:left;   
 width:9.375em;  /* 150px / 16 = 9.375em */
}

/* Alle Ebenen ausblenden */

ul ul {
 position:absolute;
 height:0;
 left:0;
 background:#000;
 transition:height .4s;
}

ul li:hover ul {
  background:#333;
  height:3.625em; /* (19+(2×5)) / 16×2 */
 overflow:hidden;
}

ul a:hover {
 background:#a33;
}
</style>
</head>
<body>
<ul>
 <li><a href="#">Thema 1 </a>
  <ul>
  <li><a href="#">Thema 4.4 </a></li>
  <li><a href="#">Thema 4.5 </a></li>
  </ul>
  </li>
  <li><a href="#">Thema 2 </a>
  <ul>
  <li><a href="#">Thema 4.4 </a></li>
  <li><a href="#">Thema 4.5 </a></li>
  </ul>
  </li>
 </ul>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben