Un menu déroulant en CSS
le 13/01/2010 : CSS, Webdesign
Vous cherchez une solution esthétiquement proche d’un menu déroulant mais qui soit pleinement suivie par les robots des moteurs de recherche? Voici une piste à suivre : la liste HTML reformatée
-
Sélectionner le site de votre choix
aSeed webdesign
1001 Bons Plans
1001 Petites Annonces
<style>
ul.select_list {
padding:0;
margin:0;
width:250px;
}
ul.select_list *{
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding:0px;
margin:0px;
}
ul.select_list li{
list-style:none;
border-top:0px;
width:100%;
}
ul.select_list li.active{
background-color:#eee;
}
ul.select_list li a{
padding:4px 12px 4px 4px;
text-decoration:none;
display:none;
margin:-2px 0 0 0;
background-color:#fff;
height:14px;
}
ul.select_list li a img{
float:left; border:1px solid #333; margin-right:4px; height:12px;
}
ul.select_list:hover li a{
display:block;
border:1px solid #999;
border-top:0px;
color:#333;
}
ul.select_list:hover li a:hover{
background-color:#999;
display:block;
color:#f0f0f0;
}
ul.select_list li#select0 div#first{
font-weight:bold;
border:1px inset #999;
color:#333;
padding:2px 2px 2px 4px;
background-color:#fff;
margin-bottom:2px;
}
ul.select_list li#select0 div#first div{
background:url(http://www.aseed.fr/images/select_down.gif) right top no-repeat;
margin:0px 1px 0 0 ;
height:18px;
}
ul.select_list li#select0 div#first div span{
position:relative;
top:2px;
}
* html ul.select_list li a {
position:relative;
top:-2px;
}
</style><ul class="select_list">
<li id="select0"><div id="first"><div><span>Sélectionner le site de votre choix</span></div></div></li>
<li class="active" id="select1"><a href="http://www.aseed.fr/"><img src="http://www.aseed.fr/favicon.ico" style=" ">aSeed webdesign </a></li>
<li id="select2"><a href="http://www.1001-bons-plans.com/"><img src="http://www.1001-bons-plans.com/favicon.ico" border="0" style="float:left; border:1px solid #333; margin-right:4px; height:12px; ">1001 Bons Plans</a></li>
<li id="select3"><a href="http://www.1001-petites-annonces.com"><img src="http://www.1001-petites-annonces.com/favicon.ico" border="0" style="float:left; border:1px solid #333; margin-right:4px; height:12px; ">1001 Petites Annonces</a></li></ul>
Leave a Reply
A la recherche d'une info?
Utilisez ce formulaire pour rechercher sur le site:
Quelques liens...
Archives
Les dernières publications