Chi mi aiuta a capire dove sbaglio nel mio CSS?

pinonirvana

Nuovo Utente
24 Mar 2009
5
0
1
Buongiorno a tutti.
Ho creato un menù che al passagggio del mouse mi mette un'immagine, scrivendo:
.menu:hover{background: url(img/bg.gif) repeat-x;}.
Ora, nel caso ci siano anke dei sottomenù, vorrrei che apparisse anke una freccina verso il basso, e ho provato inserendo
.mainMenuParentBtn, .mainMenuParentBtnFocused {background: url(img/arrow.gif) right center no-repeat;}
Anke in questo caso funziona, la freccia la vedo, ma al passaggio del mouse la freccia mi viene messa in secondo piano, nascosta quindi sotto il background....come posso fare per posizionarla ad un livello superiore?
Grazie a tutti...
 
Ultima modifica:
Certo!

Allora, in realtà sono 2 CSS, uno per il menù classico (style.css), e uno per i sottomenù (eseguito in javascript, menu.css). L'id del div del menù è "#pagemenu".

Style.css
Codice:
/* NAVIGATION MENUS */

#pagemenuwrap {
	height: 40px;
    margin-top: 25px;
    background: url(images/footer-background.png) left top repeat-x;
    border-top: 1px solid #433c3c;
    border-bottom: 1px solid #433c3c;
	}
    
#pagemenucontainer {
	height: 28px;
    padding: 5px 0 6px  8px;
	}

#pagemenu {
	height: 28px;
	}

#pagemenu, #pagemenu ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	}
#pagemenu {
	margin-bottom: 1px;
	}
	
#pagemenu ul {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	}
	
#pagemenu li {
	float: left;
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#pagemenu ul li {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	
#pagemenu li a, #pagemenu li a:link {
	color: #c6c6c6;
	display: block;
    margin: 0 6px 0 0;
	padding: 9px 16px;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
	}
	
#pagemenu li a:hover, #pagemenu li a:active{
	color: #fff;
	display: block;
    text-decoration: none;
    background: url(images/pagenav-hover.png) top left repeat-x;
	}
	
#pagemenu  li.current_page_item a {
	color: #fff;
    text-decoration: none;
    background: url(images/pagenav-hover.png) top left repeat-x;
	}

#pagemenu li:hover, #pagemenu li.sfhover { 
	position: static;
	}

menu.css
Codice:
/* ----[ LINKS ]----*/

/* all menu links */
#subMenusContainer a {
	text-decoration:none;
	display:block;
}
/* Just sub menu links */
#subMenusContainer a{
	color: #fff;
	font-size: 12px;
	text-align:left;
	background-color:#f1f1f1;
	padding:5px 20px;
    color: #ff4500;
	font-weight: bold;
	-moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
/* sub menu links on hover or focus */
#subMenusContainer a:hover, 
#subMenusContainer a:focus, 
#subMenusContainer a.subMenuParentBtnFocused {
	background-color: #ff4500;
	color:#fff;
	font-weight: bold;
}
/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn {
	background: url(img/arrow1.gif) right center no-repeat;
}
/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused {
	background: url(img/arrow2.gif) right center no-repeat;
}
/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn {
	background: url(img/arrow3.gif) right center no-repeat;	
}
/* Parent Main Menu Links on hover or focus ---[javascript users only]**/
.mainMenuParentBtnFocused {
	background: url(img/arrow4.gif) right center no-repeat;
}
/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW {
	display:none;
	position: absolute;
	overflow:hidden;
	/*the 2px left & right padding lets you have a 1px border 
	  on the ul or ol inside since overflow is set to hidden*/
	padding:0 2px;
	margin:0 0 0 -2px;
}
/* All ULs and OLs */
#subMenusContainer ul, #subMenusContainer ol {
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1em;
}
/* All submenu OLs and ULs */
#subMenusContainer ul, #subMenusContainer ol {
	/*border around submenu goes here*/	 
	background: none;
	left:0;
}
#subMenusContainer li {
	list-style: none;
}
#subMenusContainer {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:0;
	overflow:visible;
	z-index:1000000000;
}

Grazie per l'aiuto...
:love:
 
Ultima modifica di un moderatore:

Discussioni simili