Onglet CSS Menu "Mouseover " Horizontal

Nous avons nommé cet onglet CSS menu "mouseover " basé sur son look. Le menu utilise une image de fond transparente pour chaque élément d'onglet pour créer un bord tout autour. Cette transparence signifie que vous pouvez modifier les couleurs des éléments du menu (comme la couleur hover) juste en changeant les valeurs de couleur CSS dans la feuille de style. Alignement facile est aussi supportée, afin que vous puissiez, par exemple, aligner le centre ou à droite des onglets, si désiré. Nice! /*noter :vous pouvez traduire les commentaires de votre css, le modifier et pour traduire en haut a droite ou pour télécharger la barre de traduction ou le code via ce lien http://translate.google.com */

• Démo
• HTML CODE
• CSS CODE

• Home
• DHTML
• CSS
• Forums
• Gif Optimizer

<div class="halfmoon"> <ul> <li><a href="#">Home</a></li> <li><a href="#">DHTML</a></li> <li class="selected"><a href="#">CSS</a></li> <li><a href="#">Forums</a></li> <li><a href="#">Gif Optimizer</a></li> </ul> </div>

<style type="text/css"> .halfmoon{ margin-bottom:1em; } .halfmoon ul{ padding: 3px 9px 2px 5px; margin-left: 0; margin-top: 1px; margin-bottom:1 0; font: bold 14px Times; list-style-type: none; text-align: center; /*set to left, center, or right to align the menu as desired*/ border-bottom: solid #FFCC00 5px; } .halfmoon li{ display: inline; margin: 0; } .halfmoon li a{ text-decoration: none; padding: 10px 20px 30px; margin: 0; margin-right: 5px; /*distance between each tab*/ border-left: 2px solid #DDD; color: black; font-size: 14px; background: #FFCC66; } .halfmoon li a:visited{ color: navy; } .halfmoon li a:hover{ background-color: #99FFCC; color: red; } </style>