colore testo in menu css [era: Disperazione menu CSS]

**D4rkAng3l** · 12-09-2008, 18:50

Ciao,
stò adattando un menu css ma mi stò impiccando con un problema che mi manda ai pazzi.
Se andate su: http://www.siatec.net/andrea/archivi...nte/home3.html potete vedere il menu in questione.
Passando il mouse sopra i bottoni appaiono le varie tendine con sfondo giallino\panna. Come potrete notare il testo non si legge perchè è dello stesso colore. Ecco, non riesco a cambiare il colore di questo testo per renderlo visibile e non ne riesco ad uscire...probabilmente non è una cosa molto difficile ma mi sono proprio bloccato...mi dareste una mano?

Il codice HTML è:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link rel="stylesheet" href="default3.css" type="text/css" />
</head>

<body>

  <div id="centrato">
  
     <ul id="menu">[*]

<dl class="one">

	<dt>CHI SIAMO</dt>
	<dd>zero dollars</dd>
	<dd>wrapping text</dd>
	<dd>styled form</dd>
	<dd>active focus</dd>
	<dd>shadow boxing</dd>

	<dd>image map</dd>
	<dd>fun with backgrounds</dd>
	<dd>fade scrolling</dd>
	<dd>em sized images</dd>
</dl>

[*]


<dl class="two">
	<dt>GALLERY</dt>
	<dd>spies menu</dd>
	<dd>vertical menu</dd>
	<dd>enlarging list</dd>
	<dd>link images</dd>
	<dd>non-rectangular links</dd>

	<dd>jigsaw links</dd>
	<dd>circular links</dd>
</dl>

[*]

<dl class="three">
	<dt>CONTATTI</dt>
	<dd>Fixed 1</dd>

	<dd>Fixed 2</dd>
	<dd>Fixed 3</dd>
	<dd>Fixed 4</dd>
	<dd>minimum width for Internet Explorer</dd>
</dl>

[*]



[/list]
     
     <div id="logo"></div>
  
  </div>

</body>
</html>

mentre il codice CSS è:

codice:

body, html{
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #cbd200;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  height:100%;
}


#centrato{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

#logo{
   background-image: url(http://www.bbcsite.com/immagini/crea...600-sfondo.gif);
   background-repeat: no-repeat;
   width: 835px;
   height: 600px;
   position:absolute;
   top:50%;
   left:50%;
   margin-top: -300px;
   margin-left: -480px;
}

#menu{
    list-style-type: none; 
	margin: 40px 0 200px 15px; 
	padding:0;
}

#menu li{
    float: left; 
	padding: 0; 
	margin: 0 1px 0 0; 
	position: relative; 
	width: 150px;
	height: 1px; z-index:100;
}

#menu li a, #menu li a:visited{
   text-decoration: none;
}

#menu dl{ 
   position: absolute; 
   top: 0; 
   left: 0;
   width: 150px;
   margin: 0; 
   padding: 0; 
   background: transparent url(transparency.gif);
   font-family: Verdana, Arial, Helvetica, sans-serif;
}


#menu dt{
   background: #e3004a;
   margin: 0;
   font-size: 13px;
   text-align: left;
   border-bottom:1px solid #b2ff60; 
   width: 150px; 
   float: left;
}

#menu dd{
   display: none; 
   background: transparent; 
   border-bottom: 1px solid #b2ff60; 
   clear: left; 
   margin: 0; 
   padding: 0; 
   color: #fff;
   font-size: 13px; 
   text-align: left;
}

#menu dt a{
   display: block; 
   color: #fff; 
   padding: 5px 5px 5px 20px; 
   width: 125px;
}


#menu dt a:visited{
   display: block; 
   color: #fff; 
   padding: 5px 5px 5px 20px; 
   width: 125px;
   }


#menu dd a{
   background:#fdf8bf; 
   color:#ff8; 
   text-decoration:none; 
   display:block; 
   padding:4px 5px 4px 20px; 
   width:276px;
}

#menu dd a:visited {
   background:#fdf8bf; 
   color:#ff8; 
   text-decoration:none; 
   display:block; 
   padding:4px 5px 4px 20px; 
   width:276px;
}

#menu li a:hover {border:0;}

#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {width:301px; border-bottom:15px solid #e2dfa8;}
#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {background: #e2dfa8; color:#e22bc6;}

Grazie
Andrea

**lauryn** · 12-09-2008, 19:23

la risposta è molto semplice:

#menu dd a{
background:#fdf8bf;
color:#ff8; /* è qui che devi cambiare il colore */
text-decoration:none;
display:block;
padding:4px 5px 4px 20px;
width:276px;
}

**D4rkAng3l** · 12-09-2008, 19:27

si avevo appena risolto da solo, grazie comunque :-)

Discussione: colore testo in menu css [era: Disperazione menu CSS]

Strumenti discussione

Ricerca discussione

Visualizza

Disperazione menu CSS

Permessi di invio