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

Signaler
Messages postés
498
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
1 mars 2020
-
msi79
Messages postés
498
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
1 mars 2020
-
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>

8 réponses

Messages postés
21
Date d'inscription
samedi 9 août 2014
Statut
Membre
Dernière intervention
30 août 2014

Messages postés
498
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
1 mars 2020

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;
}
Messages postés
21
Date d'inscription
samedi 9 août 2014
Statut
Membre
Dernière intervention
30 août 2014

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 ;)
Messages postés
21
Date d'inscription
samedi 9 août 2014
Statut
Membre
Dernière intervention
30 août 2014

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
Messages postés
21
Date d'inscription
samedi 9 août 2014
Statut
Membre
Dernière intervention
30 août 2014

et remplace <ul class="menu"> par <ul>

Désolé la journée à été longue j'ai un peu de mal ^^
Messages postés
498
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
1 mars 2020

mon problème n'est pas resolu . mes sous menus ont des sous sous menu
Messages postés
21
Date d'inscription
samedi 9 août 2014
Statut
Membre
Dernière intervention
30 août 2014

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
Messages postés
498
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
1 mars 2020

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>