Menu vertical sur une liste ordinaire

Menu vertical sur une liste ordinaire Ce CSS crée un "3 états" menu vertical sur une liste ordinaire. Quand la souris passe sur le menu, l'élément de menu jusqu'à biseaux. En outre, dans les navigateurs modernes comme Firefox (pas IE6), en cliquant sur le menu crée un effet de dépression alors que la souris est maintenu enfoncé. L'effet de biseau créée en utilisant le border-style: attribut d'emblée. Il n'est pas nécessaire de manuellement la couleur du 4 frontières de l'élément de menu. /*noter :vous pouvez traduire les commentaires de votre CSS, le modifier et le traduire a votre langue via GOOGLE TRADUCTION

• DEMO
• HTML CODE
• CSS CODE

Voici un menu a 2 codes le HTML et CSS STYLE DE VOTRE MENU MODIFIABLE

• LE TITRE DE VOTRE PAGE
• page1
• page-2
• page-3
• page-4
• page-5

<br/> <ul class="bevelmenu"> <li><a href="#" >LE TITRE DE VOTRE PAGE</a></li> <li><a href="#" > page1</a></li> <li><a href="#" > page-2</a></li> <li><a href="#" >page-3</a></li> <li><a href="#" > page-4</a></li> <li><a href="#" > page-5</a></li> </ul>

<style type="text/css"> .bevelmenu{ list-style-type: none; margin: 5; padding: 5; width: 200px; } .bevelmenu li a{ display: block; width: 100%; padding: 2px 2px; text-decoration: none; font-weight: bold; background-color: #4CD5FD; border: solid #00FF66 3px; text-decoration:none; } .bevelmenu li a:hover{ color: #FFFFFF; background-color: #FCD209; border-style: groove; } html>body .bevelmenu li a:active{ /* Apply mousedown effect (non IE browsers only) */ border-style: inset; } </style>