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

Transition Dropdown funktioniert nicht?

U

und3rtaker

Neues Mitglied
Hey Leute,
ich wollte den Animationseffekt mit
Code: 
transition: height 1s ease 0s;
testen, allerdings funktioniert es nicht. Es öffnet sich ganz normal wenn ich über den dropdown li hovere.

HTML Code:
Code: 
<!DOCTYPE html>
<html>

<head>
    <title>Homepage</title>

    <meta charset="UTF-8">
   
    <link href="style3.css" type="text/css" rel="stylesheet">
</head>

<body>
    <div id="container">
        <header>
            <hgroup>
                <h1>Willkommen</h1>
                <h3>Slogan....</h3>
            </hgroup>
        </header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Dropdown1</a>
                    <ul>
                        <li><a href="#">Eintrag1</a></li>
                        <li><a href="#">Eintrag2</a></li>
                        <li><a href="#">Eintrag3</a></li>
                    </ul>
                </li>
                <li><a href="#">Dropdown2</a>
                    <ul>
                        <li><a href="#">Eintrag4</a></li>
                        <li><a href="#">Eintrag5</a></li>
                    </ul>
                </li>
                <li><a href="#">xyz</a></li>
                <li><a href="#">xyz</a></li>
            </ul>
        </nav>
    </div>

</body>
</html>


CSS:
Code: 
*{
    margin:0;
    padding:0;
    color: #FFF;
}
body{
    background-image: url(img01.png);
    }
#container{
    margin: 30px auto;
    width: 1000px;
    text-align: center;

}
#container header{
    height: 150px;
    padding: 20px;
    border-radius: 10px;
    background: #FFF;


}
#container nav{
    text-align: center;
    margin-left:75px;
}
#container nav ul{
    margin: 0;
    padding: 0;
    list-style: none;

}
#container nav ul li{
    float:left;
    padding: 10px;
    background: blue;
    width: 150px;
    text-align: center;


}
#container nav ul ul{
    width:1000px;
    position: absolute;
    top:260px;
    overflow: hidden;
    height: 0;


}
#container nav ul ul li{
    text-align: center;
    width: 150px;
    float:none;




}
#container nav ul li:hover ul{
    overflow:visible;
    }
#container nav ul ul li:hover{
    background: #FF0000;
}


Wo müsste transition Befehl rein und was müsste geändert werden? Hab alles was ich weiß versucht leider nicht zum Laufen gebracht.

Außerdem funktioniert
Code: 
border-radius
seltsamerweise bei #container nav nicht, es reagiert nicht auf den Befehl??


Vielen Dank

mfg
 
Es gab ja immerhin 19 Views und andere Threads die aktiv waren, aber das mal beiseite.

Transition hab ich wieder gelöscht weil es nicht funktioniert hat.
ich hatte es bei nav ul ul und bei nav ul ul li drin.

laut dem Tutorial sollte es nicht bei ul li:hover ul rein.

ein border wird nicht benötigt, mein Header hat ohne border einen border-radius.


dennoch Danke


edit:

ich hab das mal mit border probiert bei #container nav



das kam dabei raus.

habe dann mal position auf absolute gesetzt, dann war es von dem border umrandet, was dann so aussah:



.. ist nav etwa nicht im fluss oder wie kommt das, das blaue sollte ja eckige runden haben
 
Zuletzt bearbeitet:
Hey,
ich wollte euch nochmal zwei Beispiele zeigen.
Ich bräuchte dringend Hilfe weil ich bin noch Anfänger und krieg es einfach nicht gelöst.

bei absoluten Positionierung:


bei relativer Positionierung:



Der Code:

Code: 
nav{
    margin-top: 20px;
    text-align: center;
    margin-left:75px;
    /*position: relative;
       position: absolute;
*/
    border-radius: 30px;
    border: 5px outset red;
    padding: 10px;


}


Meine Frage ist immernoch warum mein NAV nicht umrandet wird also das blaue, wenn ich NAV anspreche?

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

Neueste Beiträge

Zurück
Oben