Maison > Article > interface Web > 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:191916parcourir

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Réaliser l'effet de porte coulissante des pages Web basées sur HTML+CSSArticle suivant：Réaliser l'effet de porte coulissante des pages Web basées sur HTML+CSS

Articles Liés

Voir plus