tabelle con border visibili

actor

tabelle con border visibili

Ho cercato di arrangiarmi da solo ma non ce la faccio. Chiedo aiuto!
Credo ormai di aver incasinato tutto e non ci capisco più niente.
Quel che io vorrei facesse è:
All'apertura della pagina si deve vedere la lista verticale dentro la tabella con scritte e linee di contorno bordeaux su sfondo bianco.
Andandoci sopra col mouse, la cella deve diventare bordeaux e le scritte bianche.

Pensavo fosse più semplice da fare ma... mi arrendo...

**
In html** :
[html]

<div id="menu01v">
<ul>
<li><a href="Miapagina1.html">Miapagina1</a></li>
<li><a href="Miapagina2.html">Miapagina2</a></li>
<li><a href="Miapagina3.html">Miapagina3</a></li>
ecc. sino a 25
</ul>
</div>

</td>
</table>

</div>
[/html]

In CSS :


#menu01v{
    width: 16em;
    font: 70% Verdana,Arial, Helvetica, sans-serif;    
} ul{
    margin: 0;
    padding: 0;
    list-style: none;
    top: 0;    
} li{
    font-size: 1.2em;
    display: inline;
    margin: 0;
    padding: 0;    
} a:link, a:visited{
display: block;
background: #ffffff;
color: #990000;
margin:0.06em 0;
padding: 0.3em 0.3em;
text-decoration: none;
border: 0px;
} a:hover, a:focus, a:active{
background:;
color:;
border-color: #41545F;
padding-left: 0.3em;


}

A:link        {color: rgb(137,8,29); text-decoration:none;}
A:active    {background-color: rgb(137,8,29); color:white; text-decoration:none}

#specialità{
    width: 179px;
    height: 800px;  /*valore d'esempio*/
    position: absolute; /*permette di posizionare con proprieta left e margin*/
    left: 50%;
    top: 145px; /*l'angolo destro di wrapper sara al 50% della larghezza della finestra del browser*/
    margin-left: -395px; /*meno metà di width per postare wrapper verso la sinistra  e centrarlo*/
    background-color: #fff;    
}

grazie a chiunque risponda.

lumpi

Ciao,
se ho capito bene vuoi che ogni cella abbia contorno e scritte bordeaux a riposo e andandoci sopra col mouse quest'ultime devono diventare bianche.

Prova così...


#menu01v a:link, a:visited {
background:#FFFFFF none repeat scroll 0%;
 border:1px solid #900;
color:#990000;
display:block;
margin:0.06em 0pt;
padding:0.3em;
text-decoration:none;
}


  a:hover, a:focus, a:active {
 background:#990000 none repeat scroll 0%;
 color:#FFFFFF;
 padding-left:0.3em;
 border:1px solid #fff;

```:ciauz:

actor

Bene. Tra i tuoi suggerimenti e ancora "un'infinita ricerca su internet" sono riuscito ad ottenere quello che desideravo.
Non so se il codice è completamente corretto ma il risultato è giusto.
Posto qui sotto il tutto anche per altri che dovessero avere bisogno:

HTML

<div id="menu01v">
<ul>
<li><a href="Mia pagina1.html">Miapagina1</a></li>
<li><a href="Mia pagina2.html">Mia pagina2</a></li>
<li><a href="Mia pagina3.html">Mia pagina3</a></li>
<li><a href="Mia pagina4.html">Mia pagina4</a></li>
ecc. sino a 25
</ul>
</div>

CSS

#menu01v{
width: 18em;
font: 72% Verdana, Arial, Helvetica, sans-serif;
text-align:left;
position: absolute;
left: 0px;
top: 156px;
}
ul{
margin: 0;
padding: 0;
list-style: none;
top: 0;
}
li{
font-size: 1.2em;
display: inline;
margin: 0;
padding: 0;
}
a:link, a:visited{
display: block;
background: #ffffff;
color: #89081d;
margin:0.0em 0;
padding: 0.4em 0.2em 0.4em 0.2em;
text-decoration: none;
border-bottom: 1px solid;;
border-collapse: collapse;
}
a:hover, a:focus, a:active{
background:;
color:;
border-color:;
padding-left: 0.3em;
}

Grazie ancora per la tua risposta.
A presto.