Maison > Article > interface Web > Créer un effet d'invite de navigation triangulaire avec CSS (exemple de code)

Créer un effet d'invite de navigation triangulaire avec CSS (exemple de code)

云罗郡主original: 2018-11-26 15:38:182188parcourir

Le contenu de cet article concerne la création d'un effet d'invite de navigation triangulaire avec CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS制作一个三角的导航提示效果</title>
</head>
<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>
<body>
   <ul id="menu">
      <li><a href="#"><span>CSS教程</span><em></em></a></li>
      <li><a href="#"><span>CSS布局</span><em></em></a></li>
      <li><a href="#"><span>CSS兼容性</span><em></em></a></li>
      <li><a href="#"><span>CSS</span><em></em></a></li>
    </ul>
</body>
</html>

L'effet est le suivant :

Créer un effet dinvite de navigation triangulaire avec CSS (exemple de code)

Ce qui précède est une introduction complète à l'effet de la création d'une invite de navigation triangulaire avec CSS, si vous Si vous voulez en savoir plus sur leTutoriel CSS3, veuillez faire attention au site Web PHP chinois.

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：Implémenter un menu à largeur adaptative avec CSS (exemple de code)Article suivant：Implémenter un menu à largeur adaptative avec CSS (exemple de code)

Articles Liés

Voir plus