Comment créer un sous menu [Résolu]

Messages postés
455
Date d'inscription
lundi 24 août 2009
Dernière intervention
9 octobre 2018
- 26 août 2014 à 21:13 - Dernière réponse :
Messages postés
455
Date d'inscription
lundi 24 août 2009
Dernière intervention
9 octobre 2018
- 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>
Afficher la suite 

Votre réponse

8 réponses

Messages postés
21
Date d'inscription
samedi 9 août 2014
Dernière intervention
30 août 2014
- 27 août 2014 à 11:28
0
Merci
Commenter la réponse de LeiiNats.DEV
Messages postés
455
Date d'inscription
lundi 24 août 2009
Dernière intervention
9 octobre 2018
- 27 août 2014 à 11:43
0
Merci
voici ce que j'ai tenté de mais ça ne me donne rien :
.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;
}
Commenter la réponse de msi79
Messages postés
21
Date d'inscription
samedi 9 août 2014
Dernière intervention
30 août 2014
- 27 août 2014 à 17:41
0
Merci
Je pense que tu mélange classe et ID.

Si dans ton html tu appel "<ul class="menu">", dans ton css tu écris ".menu" pour toute manipulation

Si tu appel "<ul id="menu">" dans ton CSS tu écris "#menu"...

J'ai copié ton html et créé un css a coté en y mettant que des "." et ça fonctionne perso. Manque un peu de forme mais ça viendra par la suite.

<Essaye de remplacer tes 3 "#" par des "."

Tiens moi au courant peace ;)
Commenter la réponse de LeiiNats.DEV
Messages postés
21
Date d'inscription
samedi 9 août 2014
Dernière intervention
30 août 2014
- 27 août 2014 à 17:45
0
Merci
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
Commenter la réponse de LeiiNats.DEV
Messages postés
21
Date d'inscription
samedi 9 août 2014
Dernière intervention
30 août 2014
- 27 août 2014 à 17:46
0
Merci
et remplace <ul class="menu"> par <ul>

Désolé la journée à été longue j'ai un peu de mal ^^
Commenter la réponse de LeiiNats.DEV
Messages postés
455
Date d'inscription
lundi 24 août 2009
Dernière intervention
9 octobre 2018
- 27 août 2014 à 18:17
0
Merci
mon problème n'est pas resolu . mes sous menus ont des sous sous menu
Commenter la réponse de msi79
Messages postés
21
Date d'inscription
samedi 9 août 2014
Dernière intervention
30 août 2014
- 27 août 2014 à 18:23
0
Merci
Je ne vois pas dans ce cas désolé, j'ai copié tout le code que je t'ai donné dans un fichier html et un fichier css sur mon bureau.

Je lance la page sans rien modifier et j'ai bien un sous menu pour l'item 2.

no comprendo désolé l'ami bon courage
Commenter la réponse de LeiiNats.DEV
Messages postés
455
Date d'inscription
lundi 24 août 2009
Dernière intervention
9 octobre 2018
- 28 août 2014 à 21:27
0
Merci
Jai pu le faire voici ma solution ;
<style type="text/css">

#menu{
padding : 0;
margin: 0px 0px 0px 185px;
list-style: none;
line-height : 50px;
text-align : center;
position:relative;
background:url(menu-spacer.gif) left top no-repeat;
}
#menu ul
{
padding : 0;
margin: 0 ;
list-style: none;
line-height : 50px;
text-align : center;
position:relative;
background:url(menu-spacer.gif) left top no-repeat;
}

#menu
{
width:100%;
font-weight : bold;
font-family : Arial;
font-size : 18px;
z-index:10000

}

#menu a
{
display : block; /
padding : 0;
position:relative;
background:url(menu-spacer.gif) left top no-repeat;
color : #000;
text-decoration : none;
width : 150px;
font-family: 'Adamina', serif;
letter-spacing:-1px;
padding:5px 20px 4px 20px;
}

#menu li
{
float : left;
border: 1px solid #FFF;
list-style : none;

}

html>body #menu li
{
border-right: 1px solid transparent ;
}

#menu li ul /* Sous-listes */
{
position: absolute;
width: 110px;
left: -999em;
}

#menu li ul li
{
border-top : 1px solid #000;
}

html>body #menu li ul li
{
border-top : 1px solid transparent;
background: #EEEEEE;
}

#menu li ul ul
{
margin: -60px 0px 0px 170px ;
border-left : 1px solid #000 ;
}

html>body #menu li ul ul
{
border-left : 1px solid transparent ;
}

#menu a:hover, #menu li ul a:hover
{
background: #1E57A7;
color:#FFF;
}

#menu li:hover ul ul, #menu li.sfhover ul ul
{
left: -999em;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul
{
left: auto;
min-height: 0;
}

</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+="sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<ul id="menu">

<li><a href="index.php" style="color:#CA4B00">Accueil</a> </li>

<li><a href="about.php">Présentation</a> </li>

<li><a href="courses.php">Nos Offres</a>

<ul>
<li><a href="tuto.php">Les logements</a>

<ul>
<li><a href="exo.php">log. sociaux</a></li>
<li><a href="exo.php">log. economiques</a></li>
<li><a href="exo.php">log. standing</a></li>
</ul>

</li>
<li><a href="ajax.php">Album</a></li>
</ul>

</li>
<li><a href="calendar.php">Pré-souscription</a> </li>
<li><a href="contacts.php">Contact</a></li>
</ul>
Commenter la réponse de msi79

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.