Menu CSS – Menu con cursore

Andrea Leti - 3 Commenti - Articoli simili li trovi in: CSS

Gli effetti rollover chi l’ha detto che debbano essere utilizzati solo per lo sfondo? Provate questo Menu!
Un nuovissimo menu con cursore che identifica esattamente dove si sta per cliccare e comunque la categoria selezionata!

Questo il testo HTML:

<ul class="Menu">
           <li> Prima voce </li>
           <li> Seconda voce </li>
           <li>Terza Voce</li>
</ul>

Le regole CSS da utilizzare sono:

.Menu{
width:199px; margin:0;
padding: 15px 0;
border-right:1px solid #999;
test-align:right;
}

.Menu li{ list-style:none;
position:relative;
right:-3px;
}

.Menu a

{
display:block;
text-decoration:none;
border-right:5px solid;
padding:5px 10px 5px 0;
background:#fff;
color:#000;
}

.Menu a:link, .Menu a:visited:{
border-color:#999;
}

.Menu 

a:hover,.Menu a:focus,
.Menu a:active{
border-color:#444;
text-decoration:underline;
}

Ho creato una pagina apposita per questo esempio: Menu con cursore

Spero di avervi fatto cosa gradita! Provate questo Menu, commentatelo e fatemi vedere come lo avete utilizzato.

Trova altri articoli con questi tag: CSS, menu css, Tutorial CSS

Franco dice:
9 gennaio 2010 alle 10:09

Menu CSS – Menu con cursore???
Credo che ti sei dimenticato qualcosa!
Nella pagina di esempio, non funziona nessun

memù!
“con cursore” cosa intendi?

Saluti…

Replica

Andrea Leti dice:
9 gennaio 2010 alle 20:05

Perdonami Franco, e credo di non sbagliarmi, ma cosa c’è che non va?

A me

sembra funzionare benissimo! L’ho provato anche su un altro pc! Controlla nuovamente per favore!
Se il problema persiste mi diresti che sistema operativo utilizzi e con quale browser stai navigando?

Replica