Un company m'ha plantejat un problema. Com fer que un menú (o llistat) amb marcador per cada ítem tingui el mateix aspecte quan és link que quan no ho és.

Si es vol que hi hagi efecte hover sobre el marcador de l'ítem-link però que no n'hi hagi sobre l'item-nolink aquí us explico una solució.

<ul>
   <li><a href="/">ítem 1</a></li>
   <li><a href="/">ítem 2</a></li>
   <li><a href="/">ítem 3</a></li>
   <li>ítem 4</li>
   <li><a href="/">ítem n</a></li>
</ul>

ul {
   padding: 0 0  0 10px;
   margin: 0;
}
ul li {
   font-weight: bold;
   color: #555;
   list-style: none;
   background-image: url(icona_menu.png);
   background-repeat: no-repeat;
   background-position: 0 5px;
   padding-left: 18px;
   margin-top: 0;
}
ul li a {
   display: block;
   width: 100%;
   margin-top: 0px;
}
ul li a:hover {
   background-image: url(icona_menu_hover.png);
   background-repeat: no-repeat;
   background-position: 0 5px;
   margin-left: -18px;
   padding-left: 18px;
}

Del codi css el més important són les linies resaltades. Tinc els meus dubtes de la correcció de la sentència margin-left: -18px; però el validador css ho dóna com a vàlid.

El podeu veure funcionant mirant el menú d'aquest mateix weblog

Aquesta solució funciona correctament en Mozilla Firefox 0.8, Opera 7.23 i en Internet Explorer 6.

Si ho mireu en algun navegador que no sigui cap d'aquests tres agrairia que em diguessiu si es veu bé i quin navegador i versió és.

En Internet Explorer 5.0 i 5.5 també funciona

En Opera 6.05 no funciona