problema con css y joomla

pasteles · #1 (**permalink**) 23/09/2009, 05:47

Buenas , estoy utilizando una plantilla joomla, y estoy teniendo un problema con un menu y css. El problema es que tengo inicialmente un menu:
_img36.imageshack.us/img36/6959/16227409.jpg_

Ahora cuando pongo el cursor sobre un elemento, va todo correcto:
_img17.imageshack.us/img17/4048/40130285.jpg_

Pero cuando quito el cursor del botón, me aparece así:
_img42.imageshack.us/img42/4697/83684666.jpg_

Yo quiero que vuelva a ser negro, no blanco. He estado tocando todo un archivo css dentro de la plantilla llamado menu.css, pero no consigo el resultado esperado. He observado con firebug, que cuando quito el cursos de un botón se añade al elemento en el html esto:

Código:

element.style {
color:#FFFFFF;
}

El archivo en cuestion menu.css, no lo he puesto, pero si os hace falta para ayudarme, lo subo.

PD: Como no puedo poner imagenes todavia, teneis que quitarle el caracter _ al principio y final de cada enlace, y añadir al principio de cada enlace http con : y //

alexk · #2 (**permalink**) 23/09/2009, 21:43

trata de especificar la etiqueta antes de la clase ejemplo

li.lista{}
li.lista a.link{}

para evitar problemas en que se hereda el CSS fijate en tus clases que no se repitan o algo... mas no puedo saber sin codigo o url de tu problema chao y suerte!...

pasteles · #3 (**permalink**) 24/09/2009, 03:45

Bueno aquí os dejo el menu.css que creo que es donde se puede modificar este comportamiento:

Código:

/*
 * topmenu
 */

 
div#topmenu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	float: left;  
}

div#topmenu li {
	margin: 0px;
	padding: 0px;
	float: left;
	display: block;
}

div#topmenu li a {
	height: 20px;
	padding: 0px 10px 0px 10px;
	background: url(../images/topmenu_item_bg.png) 0 4px no-repeat;
	float: left;
	display: block;
	position: relative;
	line-height: 17px;
	overflow: hidden;  
	font-size: 85%;
	text-decoration: none;
}

div#topmenu li.item1 a {
	padding: 0px 10px 0px 0px;
	background: none;
}

div#topmenu a:link, div#topmenu a:visited {
	color: #C8C8C8;
}

div#topmenu a:hover {
	/*color: #ffffff;*/
	color: #000000;
}

/*
 * menu
 */

 
div#menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	float: left;
	color: #000000;
}

div#menu li {
	position: relative;
	margin: 0px;
	padding: 0px;
	display: block;
	float: left;
	z-index: 5;  
}

div#menu li a, #menu li span.separator {
	height: 40px;
	display: block;
	float: left;
	line-height: 32px;
	text-decoration: none;
	color: #646464;
}

div#menu li span {  
	display: block;
}

div#menu li span {  
	background-repeat: no-repeat;
	background-position: 95% 0px;
}

div#menu li a.current {  
	color: #32CD32;
}

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover {  
	color: #000000;
}

div#menu li.active {  
	font-weight: bold;
}

div#menu li.active ul {  
	font-weight: normal;
}

div#menu li.parent span.separator {  
	cursor: pointer;
}

 
div#menu li.fancy {
	position: absolute;
	top: 0px;
	visibility: hidden;
	z-index: 4;
	overflow: hidden;
}

div#menu li.fancy div.fancy-container {
	padding: 0px 10px 0px 10px;
}

div#menu li.fancy div.fancy-container div.fancy-m {
	height: 40px;
	background: url(../images/menu_tab_m.png) 0 0 repeat-x;
}

div#menu li.fancy div.fancy-container div.fancy-l {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 10px;
	height: 40px;
	background: url(../images/menu_tab_l.png) 0 0 no-repeat; /* ie6png:crop */
}

div#menu li.fancy div.fancy-container div.fancy-r {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 10px;
	height: 40px;
	background: url(../images/menu_tab_r.png) 0 0 no-repeat; /* ie6png:crop */
}

 
div#menu ul.menu {
color:#000000;
}

div#menu li.level1 {
	color:#000000;
}

div#menu a.level1, div#menu span.level1 {
	/*color: #ffffff;*/
	color:#000000;
	font-weight: bold;
	font-size: 135%;
	line-height: 250%;
}

div#menu a.level1 span, div#menu span.level1 span {
	padding: 0px 20px 0px 20px;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 {  
	 color: #000000;
}

div#menu li.active a.level1, div#menu li.active span.level1 {  
	color: #32CD32;
}

 
div#menu a.level1 span.title, div#menu span.level1 span.title{
	padding: 0px;
	line-height: 200%;
}

 
div#menu a.level1 span.sub, div#menu span.level1 span.sub {
	padding: 0px;
	font-size: 55%;
	font-weight: normal;
	color: #969696;
	margin-top: -6px;
	line-height: 10px;
}

 
div#menu ul.menu ul {
	position: absolute;
	top: 40px;
	left: -999em;  
	width: 165px;
	padding: 0px 0px 10px 0px;
	background: url(../images/menu_dropdown_bg.png) 0 100% no-repeat;
}

div#menu li:hover ul, div#menu li.sfhover ul {
	left: 0px;  
	z-index: 100;
}

div#menu li.level1 li {
   	width: 100%;  
	text-indent: 15px;
}

div#menu li.level1 li a, div#menu li.level1 li span.separator{
	height: 25px;
	padding: 0px;
	margin: 0px 1px 0px 1px;
	background: #FEFEFE url(../images/menu_level2_item.png) 100% 0 no-repeat;
	float: none;  
	display: block;
	line-height: 25px;
}

div#menu li.level2 a.parent, div#menu li li.level2 span.parent {  
	background: #FEFEFE url(../images/menu_level2_item_parent.png) 100% 0 no-repeat;
}

 

 
div#menu li ul ul {
	margin: -41px 0 0 164px;  
}

div#menu li:hover ul ul, div#menu li.sfhover ul ul {
	border-top: 1px solid #c8c8c8;
}

 
div#menu li:hover ul ul, div#menu li.sfhover ul ul,  
div#menu li:hover ul ul ul, div#menu li.sfhover ul ul ul,  
div#menu li:hover ul ul ul ul, div#menu li.sfhover ul ul ul ul {  
	left: -999em;
}

 
div#menu li li:hover ul, div#menu li li.sfhover ul,  
div#menu li li li:hover ul, div#menu li li li.sfhover ul,  
div#menu li li li li:hover ul, div#menu li li li li.sfhover ul {  
	left: 0;
	z-index: 100;
}


/*
 * sub menu
 */
 
 
div#middle div.mod-menu div.module ul,
div#middle div.mod-menu div.module ul {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	list-style: none;
	background: #FEFEFE;
}

div#middle ul.menu li {
	margin: 0px;
	padding: 0px;
	display: block;
}

div#middle ul.menu a, div#middle ul.menu span.separator {
	height: 25px;
	display: block;
	line-height: 25px;
	text-decoration: none;
	color: #646464;
}

div#middle ul.menu li span {  
	display: block;
}

div#middle ul.menu li span {  
	background-repeat: no-repeat;
	background-position: 95% 0px;
}

div#middle ul.menu a.current, div#middle ul.menu a.current:hover {  
	color: #aa1428;
}

div#middle ul.menu a:hover, div#middle ul.menu span.separator:hover, div#middle ul.menu span.sfhover {  
	color: #000000;
}

div#middle ul.menu li.active {  
	font-weight: bold;
}

div#middle ul.menu li.active li {  
	font-weight: normal;
}

div#middle ul.menu li.parent span.separator {  
	cursor: pointer;
}

 
div#middle ul.menu li.level1 {
	color:#000000;
}

div#middle ul.menu a.level1, div#middle ul.menu span.level1 {
	background: #FEFEFE url(../images/submenu_level1_item.png) 100% 0 no-repeat;
	text-indent: 15px;
}

div#middle ul.menu li.parent a.level1, div#middle ul.menu li.parent span.level1 {  
	background: #FEFEFE url(../images/submenu_level1_item_parent.png) 100% 0 no-repeat;
}

 
div#middle ul.menu li.level2 {
	color:#000000
}

div#middle ul.menu li.level2 a {
	height: 20px;
	line-height: 20px;
}

div#middle ul.menu a.level2 {
	background: #FEFEFE url(../images/submenu_level2_item.png) 100% 0 no-repeat;
	text-indent: 35px;
}

div#middle ul.menu a.level2 span {
	background: url(../images/submenu_level2_item_icon.png) 15px 2px no-repeat;
}

 
div#middle ul.menu li.level3 {
	color:#000000;
}

div#middle ul.menu a.level3 {
	background: #FEFEFE;
	text-indent: 45px;
}

div#middle ul.menu a.level3 span {
	background: url(../images/submenu_level3_item_icon.png) 25px 2px no-repeat;
}

 
div#middle ul.menu li.level4 {
	color:#000000;
}

div#middle ul.menu a.level4  {
	background: #FEFEFE;
	text-indent: 55px;
}

div#middle ul.menu a.level4 span {
	background: url(../images/submenu_level4_item_icon.png) 35px 2px no-repeat;
}

Eso ocurre en el codigo
<li class="level1 item2"><a href="/quorum2/index.php?option=com_content&view=article& id=2&Itemid=2" class="level1 item2"><span>Empresa</span></a></li>