Comment créer un sous menu

Résolu

msi79 Messages postés 509 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 2 mai 2023 - 26 août 2014 à 21:13
msi79 Messages postés 509 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 2 mai 2023 - 28 août 2014 à 21:27

Bonjour,
j'ai un menu horizontal qui marche bien et voilai que mon client veux des sous menus. alors je n'arrive pas a les creer. quelqu'un peut il m'aider.
voici le menu que j'ai:

            <ul class="menu">
              <li><a class="active" href="index.php">Accueil</a></li>
              <li><a href="about.php">Présentation</a></li>
              <li><a href="courses.php">Nos Offres</a>
                <ul>  
                    <li><a href="#">Logements</a></li>  
                    <li><a href="#">Album</a></li>  
                </ul> 
              </li>
              <li><a href="calendar.php">Pré-souscription</a></li>
              <li class="last"><a href="contacts.php">Contacts</a></li>
            </ul>

et son css :

.menu {
	width:200%;
	min-height:58px;
	overflow:hidden;
	background:url(../images/menu-spacer.gif) left top no-repeat;
}
.menu li {
	float:left;
	position:relative;
	background:url(../images/menu-spacer.gif) right top no-repeat;
}
.menu li a {
	display:block;
	font-family: 'Adamina', serif;
	font-size:20px;
	line-height:2.5em;
	letter-spacing:-1px;
	padding:5px 44px 4px 40px;
	color:#000;
}
.menu > li:first-child > a {
	padding:5px 44px 4px 45px;
}
.menu li.last a {
	padding:5px 47px 4px 40px;
}
.menu li a.active, .menu li a:hover {
	color:#ca4b00;
}

voici le menu que je souhaite avoir :

            <ul class="menu">
              <li><a class="active" href="index.php">Accueil</a></li>
              <li><a href="about.php">Présentation</a></li>
              <li><a href="courses.php">Nos Offres</a>
                <ul>  
                    <li><a href="#">Logements</a>
                        <ul>  
                           <li><a href="#">Logements1</a></li>  
                           <li><a href="#">Logements2</a></li>  
                       </ul> 
                    </li>  
                    <li><a href="#">Album</a></li>  
                </ul> 
              </li>
              <li><a href="calendar.php">Pré-souscription</a></li>
              <li class="last"><a href="contacts.php">Contacts</a></li>
            </ul>

A voir également:

Menu php
Menu en php - Meilleures réponses
Php menu - Meilleures réponses
Php table - Conseils pratiques -PHP
"Php version 4.4.5" "build date" "server api" "php variables" ✓ - Forum PHP
Php protected ✓ - Forum PHP
Php version 4.4.6 build date server api php variables - Forum PHP
Exit php ✓ - Forum PHP

8 réponses

Réponse 1 / 8

LeiiNats.DEV Messages postés 21 Date d'inscription samedi 9 août 2014 Statut Membre Dernière intervention 30 août 2014
27 août 2014 à 11:28

http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php

Ca peut peut-être t'aider.

Peace.

Réponse 4 / 8

LeiiNats.DEV Messages postés 21 Date d'inscription samedi 9 août 2014 Statut Membre Dernière intervention 30 août 2014
27 août 2014 à 17:45

Autant pour moi (par habitude) j'ai créé une div menu.

HTML :


<html>
	<head>
		<link rel="stylesheet" href="test.css">
	</head>
 <body>
	<div class="menu">
<ul class="menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sous-item 1</a></li>
      <li><a href="#">Sous-item 2</a></li>
      <li><a href="#">Sous-item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a></li>
</ul>
</div>
	</body>
</html>

CSS :


.menu {
	width:200%;
	min-height:58px;
	overflow:hidden;
	background:url(../images/menu-spacer.gif) left top no-repeat;
}
.menu li {
	float:left;
	position:relative;
	background:url(../images/menu-spacer.gif) right top no-repeat;
}
.menu li a {
	display:block;
	font-family: 'Adamina', serif;
	font-size:20px;
	line-height:2.5em;
	letter-spacing:-1px;
	padding:5px 44px 4px 40px;
	color:#000;
}
.menu ul li ul {
 display:none;
 }
.menu ul li:hover ul {
 display:block;
 }
.menu li:hover ul li {
 float:none;
 }
.menu > li:first-child > a {
	padding:5px 44px 4px 45px;
}
.menu li.last a {
	padding:5px 47px 4px 40px;
}
.menu li a.active, .menu li a:hover {
	color:#ca4b00;
}

--
LeiiNats.DEV

Réponse 8 / 8

msi79 Messages postés 509 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 2 mai 2023 1
28 août 2014 à 21:27

Jai pu le faire voici ma solution ;

Discussions similaires

liste déroulante à partir d'une base de données

requête PDO pour modifier des données avec mon formulaire

Snippet : Ajouter ,Modifier, Supprimer et Rechercher

Paiement Carte Visa

Formulaire de connexion et d'inscription

modifier un enregistrement à l'aide d'un lien via un formulaire

Votre réponse

Discussions similaires