Bonjour à tous,
Je suis novice en programmation HTML et CSS, j'ai suivi quelques tutos qui m'ont permis de réaliser un menu déroulant vertical avec des sous menus voir code ci dessous. Par contre, je n'arrive pas à transformer ce menu en version horizontale (chaque menu l'un à coté de l'autre)
J'ai cru comprendre qu'il fallait utiliser Float left mais je ne sais pas ou l'ajouter.
Quelqu'un pourrait il m'aider? Merci d'avance.
Code HTML :
<html>
<head>
<title>Essai création menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style6.css">
</head>
<body>
<div id="conteneur-menu">
<div id="menu">
<ul class="niveau1">
<li><a href="menu 1">menu1</a></li>
<li class="sousmenu"><a href="menu 2">menu2</a>
<ul class="niveau2">
<li><a href="Sous menu 2.1">Sous menu2.1</a></li>
<li><a href="Sous menu 2.2/">Sous menu2.2</a></li>
</ul>
</li>
<li><a href="menu 3">menu3</a></li>
<li class="sousmenu"><a href="menu 4">menu4</a>
<ul class="niveau2">
<li class="sousmenu"><a href="Sous menu4.1">Sous menu 4.1</a>
<ul class="niveau3">
<li><a href="Sous sous menu4.1.1">Soussousmenu4.1.1</a></li>
<li><a href="Sous sous menu4.1.2">Soussous menu 4.1.2</a></li>
<li><a href="Sous sous menu4.1.3">Sous sous menu 4.1.3</a></li>
</ul>
</li>
<li><a href="Sous menu 4.2">Sous menu 4.2</a></li>
</ul>
</li>
<li><a href="menu 5">menu 5</a></li>
</ul>
</div>
</body>
</html>
CSS :
body{
background:url(fond.jpg);
}
#conteneur-menu{
background:url(menu.jpg);
height:45px;
position:relative;
left:150px;
top:200px;
}
div#menu{
position:absolute;
background:url(menu.jpg);
}
div#menu{
width:150px;
height:40px;
background:url(menu.jpg);
margin:0; padding:0;
display:block;
text-align:center;
line-height:40px;
}
div#menu ul{
margin:0; padding:0;
width:150px
border-bottom:1px solid;
height:40px;
background:url(menu.jpg);
display:block;
}
div#menu ul li{
position:relative;
list-style:none;
border-bottom:1px solid;
background:url(menu.jpg)
margin:0; padding:0;
text-align:center;
line-height:40px;
}
div#menu ul ul{
position:absolute;
top:0;
left:150px;
background:url(menu.jpg);
}
div#menu li a{
text-decoration:none;
background:url(menu.jpg);
}
div#menu a{
color:#000000;
background:url(menu.jpg);
}
div#menu li a:hover{
background:#EDD;
}
div#menu li.sousmenu:hover{
background:#EBB;
}
div#menu ul ul{
position:absolute;
top:0;
left:150px;
display:none;
}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2{display:block;}
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3{display:block;
}
div#menu li a{
text-decoration:none;
padding:4px 0 4px 8px;
display:block; border-left:1px solid#BBB;
width:144px
}
Mon code n'est certainement pas ce qui se fait de mieux, mais je crois que c'est déjà pas mal pour un débutant
Je suis novice en programmation HTML et CSS, j'ai suivi quelques tutos qui m'ont permis de réaliser un menu déroulant vertical avec des sous menus voir code ci dessous. Par contre, je n'arrive pas à transformer ce menu en version horizontale (chaque menu l'un à coté de l'autre)
J'ai cru comprendre qu'il fallait utiliser Float left mais je ne sais pas ou l'ajouter.
Quelqu'un pourrait il m'aider? Merci d'avance.
Code HTML :
<html>
<head>
<title>Essai création menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style6.css">
</head>
<body>
<div id="conteneur-menu">
<div id="menu">
<ul class="niveau1">
<li><a href="menu 1">menu1</a></li>
<li class="sousmenu"><a href="menu 2">menu2</a>
<ul class="niveau2">
<li><a href="Sous menu 2.1">Sous menu2.1</a></li>
<li><a href="Sous menu 2.2/">Sous menu2.2</a></li>
</ul>
</li>
<li><a href="menu 3">menu3</a></li>
<li class="sousmenu"><a href="menu 4">menu4</a>
<ul class="niveau2">
<li class="sousmenu"><a href="Sous menu4.1">Sous menu 4.1</a>
<ul class="niveau3">
<li><a href="Sous sous menu4.1.1">Soussousmenu4.1.1</a></li>
<li><a href="Sous sous menu4.1.2">Soussous menu 4.1.2</a></li>
<li><a href="Sous sous menu4.1.3">Sous sous menu 4.1.3</a></li>
</ul>
</li>
<li><a href="Sous menu 4.2">Sous menu 4.2</a></li>
</ul>
</li>
<li><a href="menu 5">menu 5</a></li>
</ul>
</div>
</body>
</html>
CSS :
body{
background:url(fond.jpg);
}
#conteneur-menu{
background:url(menu.jpg);
height:45px;
position:relative;
left:150px;
top:200px;
}
div#menu{
position:absolute;
background:url(menu.jpg);
}
div#menu{
width:150px;
height:40px;
background:url(menu.jpg);
margin:0; padding:0;
display:block;
text-align:center;
line-height:40px;
}
div#menu ul{
margin:0; padding:0;
width:150px
border-bottom:1px solid;
height:40px;
background:url(menu.jpg);
display:block;
}
div#menu ul li{
position:relative;
list-style:none;
border-bottom:1px solid;
background:url(menu.jpg)
margin:0; padding:0;
text-align:center;
line-height:40px;
}
div#menu ul ul{
position:absolute;
top:0;
left:150px;
background:url(menu.jpg);
}
div#menu li a{
text-decoration:none;
background:url(menu.jpg);
}
div#menu a{
color:#000000;
background:url(menu.jpg);
}
div#menu li a:hover{
background:#EDD;
}
div#menu li.sousmenu:hover{
background:#EBB;
}
div#menu ul ul{
position:absolute;
top:0;
left:150px;
display:none;
}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2{display:block;}
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3{display:block;
}
div#menu li a{
text-decoration:none;
padding:4px 0 4px 8px;
display:block; border-left:1px solid#BBB;
width:144px
}
Mon code n'est certainement pas ce qui se fait de mieux, mais je crois que c'est déjà pas mal pour un débutant