probleme de "hover" sur menu vertical [
Posted: Mon Oct 29, 2007 8:48 am
Bonjour,
Voilà le problème qui se présente. tout fonctionne très bien pour le Hover sur les éléments parent de mes menus, mais le hover ne fonctionne pas sur les éléments enfants...(par ex:1.1)
Je pense que le problème viens de ma feuilles css mais je ne parviens pas a voir ou.
Si une ame charitable passe par ici et pouvait m'aider, je l'en remercie à l'avance.
feuille CSS
/* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
/* The wrapper determines the width of the menu elements */
#menuwrapper {
width: 100%;
}
/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
margin-left: 1px;
}
#primary-nav ul {
position: absolute;
top: 0;
left: 100%;
display: none;
}
#primary-nav li {
margin-bottom: -1px;
position: relative;
}
/* Styling the basic apperance of the menu elements */
#primary-nav a {
font-size: 12px;
font-weight: bold;
display: block;
margin: 0px;
padding: 5px 0px;
color:#192666;
text-decoration: none;
background: #transparent;
min-height:1em; /* Fixes IE7 whitespace bug*/
}
#primary-nav li, #primary-nav li.menuparent {
background-color: #cedbf9;
min-height:1em; /* Fixes IE7 bug*/
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
background-color: #ffa042;
font-style: italic;
color: #000099;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent,
#primary-nav li.menuparent:hover,
#primary-nav li.menuparenth {
background-image: url(images/cms/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
/* Styling the apperance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
background-color: #ffa042;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
display: block;
}
/* IE Hack, will cause the css to not validate */
#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }
/* section header */
#primary-nav li.sectionheader {
border-left: 1px solid #006699;
border-top: 1px solid #006699;
font-size: 130%;
font-weight: bold;
padding: 1.5em 0 0.8em 0.5em;
background-color: #fff;
margin: 0;
width: 100%;
}
/* separator */
#primary-nav li hr.separator {
display:block;
height: 0.5em;
color: #abb0b6;
background-color: #abb0b6;
width: 100%;
border:0;
margin:0;
padding:0;
border-top: 1px solid #006699;
border-right: 1px solid #006699;
}
Mofifiet le code comme ceci:
/* Styling the apperance of menu items on hover */
#primary-nav li a:hover ,
#primary-nav li.menuh ,
#primary-nav li.menuparenth ,
#primary-nav li.menuactiveh {
background-color: #ffa042;
}
Voilà le problème qui se présente. tout fonctionne très bien pour le Hover sur les éléments parent de mes menus, mais le hover ne fonctionne pas sur les éléments enfants...(par ex:1.1)
Je pense que le problème viens de ma feuilles css mais je ne parviens pas a voir ou.
Si une ame charitable passe par ici et pouvait m'aider, je l'en remercie à l'avance.
feuille CSS
/* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
/* The wrapper determines the width of the menu elements */
#menuwrapper {
width: 100%;
}
/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
margin-left: 1px;
}
#primary-nav ul {
position: absolute;
top: 0;
left: 100%;
display: none;
}
#primary-nav li {
margin-bottom: -1px;
position: relative;
}
/* Styling the basic apperance of the menu elements */
#primary-nav a {
font-size: 12px;
font-weight: bold;
display: block;
margin: 0px;
padding: 5px 0px;
color:#192666;
text-decoration: none;
background: #transparent;
min-height:1em; /* Fixes IE7 whitespace bug*/
}
#primary-nav li, #primary-nav li.menuparent {
background-color: #cedbf9;
min-height:1em; /* Fixes IE7 bug*/
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
background-color: #ffa042;
font-style: italic;
color: #000099;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent,
#primary-nav li.menuparent:hover,
#primary-nav li.menuparenth {
background-image: url(images/cms/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
/* Styling the apperance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
background-color: #ffa042;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
display: block;
}
/* IE Hack, will cause the css to not validate */
#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }
/* section header */
#primary-nav li.sectionheader {
border-left: 1px solid #006699;
border-top: 1px solid #006699;
font-size: 130%;
font-weight: bold;
padding: 1.5em 0 0.8em 0.5em;
background-color: #fff;
margin: 0;
width: 100%;
}
/* separator */
#primary-nav li hr.separator {
display:block;
height: 0.5em;
color: #abb0b6;
background-color: #abb0b6;
width: 100%;
border:0;
margin:0;
padding:0;
border-top: 1px solid #006699;
border-right: 1px solid #006699;
}
Mofifiet le code comme ceci:
/* Styling the apperance of menu items on hover */
#primary-nav li a:hover ,
#primary-nav li.menuh ,
#primary-nav li.menuparenth ,
#primary-nav li.menuactiveh {
background-color: #ffa042;
}