19/08/2010, 15:18:02
j'essaye de finir mon menu, mais j'ai du mal.
Tout fonctionne :
- le sous menu reste présent quand on est sur une page
- les boutons du menu et du sous menu restent bien d'une couleur différente pour indiquer dans quelle page on est
- quand on survole le menu, les sous menus apparaissent bien
Mais le problème, c'est que quand on survole les autres boutons du menu, les sous menu apparaissent, mais le sous menu de la page active ne disparait pas.
Voila le nouveau code ( j'ai upgradé vers la version 8.2)
#menu_vert{
width: 950px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
background-image: url([[root_url]]/images/pattern_menu.png);
background-repeat: no-repeat;
background-position: center top;
}
#menuwrapper{
}
#menuwrapper ul#primary-nav{
width: 950px;
margin: 0 auto;
height: 52px;
position: relative;
}
#menuwrapper ul#primary-nav li{
float: left;
list-style-type: none;
}
#menuwrapper ul#primary-nav li a{
display: block;
float: left;
padding: 5px 12px 5px ;
font-size: 12px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#menuwrapper ul#primary-nav li a:hover{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive a{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li.menuactive li a{
background-image: url([[root_url]]/images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li ul {
position: absolute;
top: 24px;
width: 750px;
display: block;
}
#menuwrapper ul#primary-nav li ul li a{
display: none;
float: left;
padding: 5px 12px 5px;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background: none;
z-index:10;
}
#menuwrapper ul#primary-nav li ul{
padding: 0;
display: block;
}
#menuwrapper ul#primary-nav li ul a{
padding: 0;
display: none;
}
#menuwrapper ul#primary-nav li:hover ul li a{
display: block;
background-image: url([[root_url]]/images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive:hover ul li a{
height:15px;
display: block;
}
#menuwrapper ul#primary-nav li ul#first-second-nav li a{
display: block;
background: none;
z-index:5;
}
#menuwrapper ul#primary-nav li ul li a:hover{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
height:15px;
}
#menuwrapper ul#primary-nav li ul li.menuactive a{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
Merci !!!!!
Tout fonctionne :
- le sous menu reste présent quand on est sur une page
- les boutons du menu et du sous menu restent bien d'une couleur différente pour indiquer dans quelle page on est
- quand on survole le menu, les sous menus apparaissent bien
Mais le problème, c'est que quand on survole les autres boutons du menu, les sous menu apparaissent, mais le sous menu de la page active ne disparait pas.
Voila le nouveau code ( j'ai upgradé vers la version 8.2)
#menu_vert{
width: 950px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
background-image: url([[root_url]]/images/pattern_menu.png);
background-repeat: no-repeat;
background-position: center top;
}
#menuwrapper{
}
#menuwrapper ul#primary-nav{
width: 950px;
margin: 0 auto;
height: 52px;
position: relative;
}
#menuwrapper ul#primary-nav li{
float: left;
list-style-type: none;
}
#menuwrapper ul#primary-nav li a{
display: block;
float: left;
padding: 5px 12px 5px ;
font-size: 12px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#menuwrapper ul#primary-nav li a:hover{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive a{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li.menuactive li a{
background-image: url([[root_url]]/images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li ul {
position: absolute;
top: 24px;
width: 750px;
display: block;
}
#menuwrapper ul#primary-nav li ul li a{
display: none;
float: left;
padding: 5px 12px 5px;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background: none;
z-index:10;
}
#menuwrapper ul#primary-nav li ul{
padding: 0;
display: block;
}
#menuwrapper ul#primary-nav li ul a{
padding: 0;
display: none;
}
#menuwrapper ul#primary-nav li:hover ul li a{
display: block;
background-image: url([[root_url]]/images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive:hover ul li a{
height:15px;
display: block;
}
#menuwrapper ul#primary-nav li ul#first-second-nav li a{
display: block;
background: none;
z-index:5;
}
#menuwrapper ul#primary-nav li ul li a:hover{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
height:15px;
}
#menuwrapper ul#primary-nav li ul li.menuactive a{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
Merci !!!!!