Forum d'entraide PHPFrance

bonjour à tous, je suis actuellement en train de faire un petit script avec un menu en haut à droite en position absolute.
bon je vous mets les codes que j'ai:
html:

Code : Tout sélectionner

<div id="navi">
    <h2 class="onglet"><?php $t="BALISES"; for($i=0;$i<strlen($t);$i++) echo $t{$i}.'<br />'; ?></h2>
    <span class="lereste">
         <h2>MENU</h2>	
         <p>blabla</p>
            <ul id="menu">
               ...
            </ul>
     </span>
</div>
<div id="navi2">
     <h2 class="onglet"><?php $t="CONTENEUR"; for($i=0;$i<strlen($t);$i++) echo $t{$i}.'<br />'; ?></h2>
     <span class="lereste">
     <h2>MENU2</h2>	
        <p>Gestion des options générales du formulaire:</p>
        <ul>
            <li onCLick="popup('fieldset',0)"><b>Ajouter un fieldset</b></li>
        </ul>
      </span>
</div>

et css:

Code : Tout sélectionner

//içi, c'est  la déclaration en forme d'onglet de premier menu
#content #navi {
	border-left:1px dotted #000; 
	border-bottom:1px dotted #000;
	width:30px;
	background-color:#6cc;
	margin:0px 0px 20px 20px;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index:100;
}
//on affiche juste le titre de l'onglet donc le reste pfiout
#content #navi span.lereste {
	display: none;
}
//on déploie l'onglet
#content #navi:hover {
	width: 250px;
}
//on affiche le contenu
#content #navi:hover span.lereste {
	display: block;
}
//on cache le titre de l'onglet
#content #navi:hover h2.onglet {
	display: none;
}
//même chose pour le deuxième menu
#content #navi2 {
border-left:1px dotted #000; 
border-bottom:1px dotted #000;
width:65px;
background-color:#66f;
margin:0px 0px 20px 20px;
	position: absolute;
	right: 0px;
	top: 0px;
}
#content #navi2 span.lereste {
	display: none;
}
#content #navi2:hover {
width:300px;
}
#content #navi2:hover span.lereste {
	display: block;
}
#content #navi2:hover h2.onglet {
	display: none;
}

ce que je voudrait pouvoir faire, c'est que lorsque l'on est sur le premier menu (#navi), on change également la largeur du deuxième (#navi2)
ça se traduirai comme ça en pseudo code:

Code : Tout sélectionner

#navi:hover {
  #navi2 {
    width: 300px;
  }
}

si vous aviez une idées ça serait cool

edit vous pouvez voir comment est le menu actuellement içi:
http://puffins.fr/formgenerator/

bon ben voilà j'ai résolu le problème (ou plutôt je l'ai contourné),
j'ai pour cela rajouter autour des deux menu un div #navipapa, et voilà le css qui marche:

Code : Tout sélectionner

#content #navipapa:hover #navi:hover {
	width: 250px;
}
#content #navipapa:hover #navi2 {
	width: 290px;
}

#content #navi , #content #navi2 {
	border-left:1px dotted #000; 
	border-bottom:1px dotted #000;
	margin:0px 0px 20px 20px;
	position: absolute;
	right: 0px;
	top: 0px;
}
#content #navi:hover ul li , #content #navi2:hover ul li {
	cursor: pointer;
	list-style-type: square;
}
#content #navi {
	width:30px;
	background-color:#6cc;
	z-index:100;
}
#content #navi2 {
	width:65px;
	background-color:#66f;
}
#content #navi div.lereste , #content #navi2 div.lereste{
	display: none;
}
#content #navi:hover div.lereste , #content #navi2:hover div.lereste{
	display: block;
}
#content #navi:hover h2.onglet , #content #navi2:hover h2.onglet{
	display: none;
}

voilà merci à vous

pour votre aide $\:D/$

Forum d'entraide PHPFrance

:hover sur un élément, change les propriétées d'un autre

:hover sur un élément, change les propriétées d'un autre