Ce code CSS crée un menu vertical sur des listes ordinaires, en utilisant une image de flèche pour remplacer le marqueur HTML par défaut. L'image est appliquée comme une image de fond, avec une différente s'affiche lorsque la souris passe sur les liens.
/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */
Le code css
/*noter :vous pouvez traduire les commentaires de votre css, le modifier et le traduire a votre langue via ce lien http://translate.google.com */
.markermenu{
width: 170px; /*width of menu*/
}
.markermenu ul{
list-style-type: none;
margin: 5px 0;
padding: 0;
border: 1px solid #9A9A9A;
}
.markermenu ul li a{
background: white url(media/arrow-list.gif) no-repeat 2px center;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 20px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}
* html .markermenu ul li a{ /*IE only. Actual menu width minus left padding of LINK (20px) */
width: 150px;
}
.markermenu ul li a:visited, .markermenu ul li a:active{
color: #00014e;
}
.markermenu ul li a:hover{
color: black;
background-color: #ffffcb;
background-image:url(media/arrow-list-red.gif); /*onMouseover image change. Remove if none*/
}
/* Holly Hack for IE \*/
* html .markermenu ul li { height: 1%; }
* html .markermenu ul li a { height: 1%; }
/* End */
</style>
<div class="markermenu">
<ul>
<li><a href="votre lien ici" >le nom de votre page ici</a></li>
<li><a href="votre lien ici" >le nom de votre page ici</a></li>
<li><a href="votre lien ici">le nom de votre page ici</a></li>
<li><a href="votre lien ici">le nom de votre page ici</a></li>
<li><a href="votre lien ici">le nom de votre page ici</a></li>
<li><a href="votre lien ici" style="border-bottom-width: 0">le nom de votre page ici</a></li>
</ul>
</div>
0 commentaires:
Enregistrer un commentaire