Css menu deroulant

Fermé
Gunas - Modifié par Gunas le 21/04/2015 à 17:45
 Gunas - 23 avril 2015 à 07:11
Bonjour
je suis entrain d'aider un ami alors que moi je meme suis aussi debutant en html et css
j'ai suivi un tuto pour lui faire le menu mais là je dois lui faire les sous menus et
je n'y arrive pas. Si quelqu'un peut m'aider svp, je veux rajouter un sous menu mathématique : algebre et geo voilà le code sur lequel je me suis basé
<div class="navigation">
<ul>
<li><a href="http://index.php">Accueil</a></li>
<li><a href="http://livres.php">Livres</a></li>
<li><a href="#">Cours</a>
<ul>
<li><a href="">Mathématique</a></li>
<li><a href="">Science</a></li>
<li><a href="">francais</a></li>
<li><a href="">anglais</a></li>

</ul>
</li>
<li class="last-nav"><a href="">contact</a></li>

</ul>
</div>

.navigation {
float:right;
width:725px;
padding-top:20px;
}
.navigation ul{
float: right;
margin:0;
padding:0;}
.navigation ul li {
display:inline-block;
padding: 0px 10px}
.last-nav {
padding:0 0 0 15px !important}

.navigation ul li a{
position:relative;
z-index:8;
font-family:'Federo', arial;
color:#fd3cc0;
text-decoration:none;
font-size:15px;
padding:0 5px 7px 2px;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;}
.navigation ul li ul li a{ font-family:Arial, Helvetica, sans-serif; line-height:25px; font-size:14px;}
.navigation ul li ul {
float:left;
margin-top:7px;
padding:10px;
background: rgba(255, 255, 255, 0.9);
position:absolute;
z-index:6;
width:165px;
display:none}

.navigation li ul li a:hover {
text-decoration:underline;
}
.navigation li ul li a:hover {
color: #fd3cc0;
border:none;}
.navigation ul li:hover ul {
display:block}

.navigation ul li a:hover ul {
display:block}
.navigation a:hover{
border-bottom:3px solid #fd3cc0;
transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;}


A voir également:

3 réponses

ettto Messages postés 40 Date d'inscription mardi 14 avril 2015 Statut Membre Dernière intervention 28 avril 2015 6
21 avril 2015 à 18:01
voilà:

<div class="navigation">
<ul>
<li><a href="http://index.php">Accueil</a></li>
<li><a href="http://livres.php">Livres</a></li>
<li><a href="#">Cours</a>
<ul>
<li>
<a href="">Mathématique</a>
<ul>
<li><a href="">Algèbre</a></li>
<li><a href="">Geo</a></li>
</ul>
</li>
<li><a href="">Science</a></li>
<li><a href="">francais</a></li>
<li><a href="">anglais</a></li>

</ul>
</li>
<li class="last-nav"><a href="">contact</a></li>

</ul>
</div>
0
bonsoir etto, malheureusement ca ne fonctionne pas, Voilà le résultat tout est entassé :/
http://img15.hostingpics.net/pics/406729photo.jpg
0
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
21 avril 2015 à 23:18
Bonsoir,

suis aussi debutant en html et css
Dans ce cas, vous cassez pas la tête car les problèmes ne vont faire qu'apparaitre au fur et a mesure du developpement, utilisez un Framework front-end du type Bootstrap dont la documentation est vraiment complète.
0
Bonjour, j'ai rien compris. A votre avis personne ne peut m'aider svp pour le lenu du deuxieme niveau
0
Bonjour svp quelqu'un peut m'aider, merci
0