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

Messages postés
496
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
8 novembre 2019
- - Dernière réponse : msi79
Messages postés
496
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
8 novembre 2019
- 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 

8 réponses

Messages postés
21
Date d'inscription
samedi 9 août 2014
Statut
Membre
Dernière intervention
30 août 2014
0
Merci
http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php

Ca peut peut-être t'aider.

Peace.
Commenter la réponse de LeiiNats.DEV
Messages postés
496
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
8 novembre 2019
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
Statut
Membre
Dernière intervention
30 août 2014
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
Statut
Membre
Dernière intervention
30 août 2014
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
Statut
Membre
Dernière intervention
30 août 2014
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
496
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
8 novembre 2019
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
Statut
Membre
Dernière intervention
30 août 2014
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
496
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
8 novembre 2019
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