Maison >interface Web >tutoriel CSS >CSS implémente le code d'effet de menu standard WEB avec une marque triangulaire inversée
CSS implémente le code d'effet de menu standard WEB avec une marque triangulaire inversée
- 不言original
- 2018-06-05 15:29:191983parcourir
Cet article présente principalement le CSS pour implémenter le code d'effet de menu standard WEB avec une marque triangulaire inversée. Il utilise du CSS pur pour réaliser l'effet d'affichage de la marque triangulaire inversée lorsque la souris glisse dessus. Les amis qui en ont besoin peuvent s'y référer
L'exemple de cet article décrit l'implémentation CSS du code d'effet de menu standard WEB avec une marque de triangle inversé. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Voici une démonstration du menu standard WEB avec une marque en triangle inversé implémentée en css.
Le code spécifique est le suivant :
Copiez le code
Le code est le suivant :
<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>Recommandations associées :
Utilisation de CSS pur pour désactiver un exemple de code d'événements de clic de souris
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!