Bonjour,
Je travaille depuis 3 jours sur un menu déroulant horizontal (inline) au "premier rang" et vertical (block) au "deuxième rang". J'ai glané pas mal de source à droite et gauche et fais ma petite cuisine mais là, je bloque...
mon menu s'affiche bien en herizontal jusqu'à ce que j'atteigne le "sous-menu", là tout se débine...
Quelqu'un peut m'aider? Merci d'avance...
Je suis sûre que c'est possible sans javascript et tout le reste, je voudrais un code simple PHP et CSS uniquement...
Voici une partie de ma page PHP:1.le script PHP:<?$t_url = explode ("/", $_SERVER['PHP_SELF']);
foreach ($t_url as $val) $page = $val;
if (isset($_GET['page'])){
$page = $_GET['page'] ;
switch ($page) {
case "accueil" :
$texte= "accueil";
$menu2="cache";
break;
case "presentation" :
$texte= "accueil";
$menu2="cache";
break;
case "hebergement" :
$texte= "hebergement";
$menu2="cache";
break;
case "sejour" :
$texte= "sejour";
$menu2="apparent";
$menu2="active";
break;
case "activite1" :
$texte= "activite1";
$menu2="apparent";
$menu2="active";
break;
case "activite2" :
$texte= "activite2";
$menu2="apparent";
$menu2="active";
break;
case "info" :
$texte= "info";
$menu2="cache";
break;
case "renardieres" :
$texte= "renardieres";
$menu2="cache";
break;
case "tarif" :
$texte= "tarif";
$menu2="cache";
break;
case "resa" :
$texte= "resa";
$menu2="cache";
break;
case "destination" :
$texte= "destination";
$menu2="cache";
break;
case "admin" :
$texte= "admin";
$menu2="cache";
break;
}
}
else
{ $texte= "accueil";
$menu2="cache";}
?>
2.la "div menu":<div id="navigation">
<ul class="rang1">
<li><a href="?page=accueil">Présentation</a></li>
<li><a href="?page=hebergement">Votre Hébergement</a></li>
<li><a href="?page=sejour">Votre Séjour</a></li>
<ul class="<?echo $menu2;?>">
<div id="menu2"><li><a href="?page=activite1">aux Renardières</a></li></div>
<div id="menu2"><li><a href="?page=activite2">aux Allentours</a></li></div>
</ul> <li><a href="?page=info">Information</a></li>
<li><a href="?page=renardieres">La Vie aux Renardières</a></li>
<li><a href="?page=tarif">Tarification</a></li>
<li><a href="?page=resa">Réservation</a></li>
<li><a href="?page=admin">Admin</a></li>
</ul>
</div>
Voici une partie de la page CSS :
/*--------------------------------------menu-----------------------------------------*/
#navigation {
position:relative;
width:800px;
top:248px;
left:16px;
margin: 0;
padding: 0;
list-style: none;
text-align: left;
font-weight: bold;
}
#navigation li {
display: inline;
color: #FEFCFA;
background: #0F9FD8;
margin: 0px;
padding: 0px;
}
#navigation li a {
padding: 5px 3px 5px 2px;
background: #0F9FD8;
color:#FEFCFA;
line-height: normal;
text-align: center;
text-decoration: none;
vertical-align: middle;
border-right: 1px solid #0F9FD8;
border-left: 1px solid #0F9FD8;
margin: 0px;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
background: #096F8E;
border-right: 1px solid #096F8E;
border-left: 1px solid #096F8E;
text-decoration: none ;
}
.rang1 {
position:absolute;
width:800px;
height:20px;
display: inline;
top:0px;
left:0px;
margin:0px;
padding:0px;
list-style: none;
text-align: left;
font-weight: bold;
}
#menu2 {
position:relative;
width:120px;
height:auto;
list-style: none;
text-align: left;
font-weight: bold;
}
#menu2 li {
display: block;
height:20px;
color: #FEFCFA;
background: #0F9FD8;
margin: 0px;
padding: 0px;
list-style: none;
}
#menu2 li a {
padding: 5px;
background: #0F9FD8;
color:#FEFCFA;
}
#menu2 li a:hover, #menu2 li a:focus, #menu2 li a:active {
background: #096F8E;
text-decoration: none ;
visibility: visible;
display: block;
}
.apparent
{
visibility: visible;
display: block;
}
.cache
{
visibility: hidden;
display: none;
}
Merci d'avance pour votre aide moi j'ai la tête en bouillie...