Das mit CSS3 erstellte Dropdown-Menü sieht sehr schön aus und ist für alle wichtigen Websites geeignet. Heute werde ich Ihnen in diesem Artikel die Wirkung des auf CSS3 erstellten Dropdown-Menüs vorstellen Wer es braucht, kann darauf verweisen
Dropdown-Menü Simulationsrendering:
CSS3:
<style>
#box{width:200px; height:50px; overflow:hidden; cursor: pointer; transition: all 0.35s;}
#box:hover{height:250px;}
#box ul{list-style:none; margin:0; padding:0;}
#box ul li{width:198px; height:48px; line-height: 50px; text-align: center; border:1px red solid; background:#000000; color:white;}
</style>HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="box">
<ul>
<li>This's 1</li>
<li>This's 2</li>
<li>This's 3</li>
<li>This's 4</li>
<li>This's 5</li>
</ul>
</p>
</body>
</html>Das obige ist der detaillierte Inhalt vonCSS3 simuliert den animierten Dropdown-Menüeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
CSS3-Tutorial
Was sind die CSS3-Gradienteneigenschaften?
So verwenden Sie Google Voice
Was bedeutet das Formatieren eines Mobiltelefons?
Die Verwendung von „declare' in Oracle
So verwenden Sie HTML für die Webnavigation
So wechseln Sie zwischen voller und halber Breite
Methoden zur Behebung von Schwachstellen in Computersystemen
