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 :)

<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: