In diesem Artikel wird hauptsächlich CSS zum Implementieren des WEB-Standardmenüeffektcodes mit einer umgekehrten Dreiecksmarkierung vorgestellt. Er verwendet reines CSS, um den Anzeigeeffekt der umgekehrten Dreiecksmarkierung zu realisieren. Dies ist sehr einfach und praktisch. Freunde, die es brauchen, können darauf verweisen
Das Beispiel in diesem Artikel beschreibt die CSS-Implementierung des WEB-Standardmenüeffektcodes mit einer umgekehrten Dreiecksmarkierung. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:
Hier ist eine Demonstration des WEB-Standardmenüs mit einer in CSS implementierten umgekehrten Dreiecksmarkierung.
Der spezifische Code lautet wie folgt:
Code kopieren
Der Code lautet wie folgt:
<html>
<head>
<title>带倒三角标记的WEB标准菜单</title>
<style>
<!--
#menu {width:500px;padding:0;margin:40px auto;list-style-type:none;}
#menu li {width:100px; float:left; line-height:30px}
#menu a {position:relative;display:block; text-decoration:none; background:#cccccc;width:100px; }
#menu a span {display:block; font-weight:bold;color:#000; border-style:solid;border-width:0px 2px 2px 0px; border-color:#fff #fff #06a #fff;text-align:center; }#menu a em {display:none;}
#menu a:hover {background:#FF0000;}
#menu a:hover span {color:#fff; }
#menu a:hover em {display:block; overflow:hidden; border:6px solid #06a; border-color:#06a #fff; border-width:6px 6px 0 6px; position:absolute; left:50%; top:100%;margin-left:-6px;}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a href="#"><span>脚本之家</span><em></em></a></li>
<li><a href="#"><span>网页特效</span><em></em></a></li>
<li><a href="#"><span>示例菜单</span><em></em></a></li>
<li><a href="#"><span>网站导航</span><em></em></a></li>
</ul>
</body>
</html>Zugehörige Empfehlung:
Das obige ist der detaillierte Inhalt vonCSS implementiert den WEB-Standard-Menüeffektcode mit umgekehrter Dreiecksmarkierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
