Css menu deroulant
Gunas
-
Gunas -
Gunas -
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é
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:
- Css menu deroulant
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Canon quick menu - Télécharger - Utilitaires
- Supprimer menu déroulant excel - Forum Excel
3 réponses
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>
http://img15.hostingpics.net/pics/406729photo.jpg