Sujet Précédent Sujet Suivant

Menu coulissant

Résolu/Fermé
jojojami Messages postés 28 Date d'inscription jeudi 20 septembre 2012 Statut Membre Dernière intervention 21 décembre 2013 - Modifié par jojojami le 5/04/2013 à 07:42
jojojami Messages postés 28 Date d'inscription jeudi 20 septembre 2012 Statut Membre Dernière intervention 21 décembre 2013 - 8 avril 2013 à 20:30
Bonjour,
je souhaite realiser un menu coulissant pour une application , j'ai commencé mon menu mais j'arrive pas à résoudre le probeme du sous menu (niveau2) , ce niveau reste tjrs afficher...
veuillez m'aider svp a fin de résoudre ce prob ; merci d'avance et bonne journée :)


voici mon code html
____________________________

<html>
<head>
<link rel="stylesheet" type="text/css" href="style-menu.css">

</head>
<body>
<ul id="menu">
<li><a href="#">Fault</a></li>
<li><a href="#" class="drop">Configuration</a>
<div class="dropdown_5columns">
<p>Infrastructure</p>

</div>
</li>
<li><a href="#" class="drop">Accounting</a>
<div class="dropdown_4columns">
<p>RADIUS</p>
<p>Journal</p>
</div>
</li>
<li><a href="#" class="drop">Performance</a>
<div class="dropdown_3columns">
<p>Rapports</p>
<p>Dashboard</p>
</div>
</li>
<li><a href="#" class="drop">Security</a>
<div class="dropdown_2columns">
<p>gestion des points d'accès</p>
<p>gestion des superviseurs</p>
</div>
</li>

</ul>
</body>
</html>

et voici mon CSS
________________________________

body {
background:#F4F4F4;
}
#menu {
list-style:none;
width:900px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;

/* Rounded Corners */

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

/* Background color and gradients */

background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

/* Borders */

border: 1px solid #002232;

-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
}

#menu li:hover {
border: 1px solid #777777;
padding: 4px 9px 4px 9px;

/* Background color and gradients */

background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

/* Rounded corners */

-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}

#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
color:#161616;
text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
padding-right:21px;
background:url("img/drop.png") no-repeat rightright 8px;
}
#menu li:hover .drop {
background:url("img/drop.png") no-repeat rightright 7px;
}






/*sous menu*/








position:absolute;
left:-999em;

background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;

.dropdown_1column {width: 100px;}
.dropdown_2columns {width: 200px;}
.dropdown_3columns {width: 100px;}
.dropdown_4columns {width: 100px;}
.dropdown_5columns {width: 100px;}
{
margin:4px auto;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #777777;
border-top:none;

/* Gradient background */
background:#F4F4F4;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;top:auto;
}







A voir également:

2 réponses

Réponse 1 / 2
ThEBiShOp Messages postés 8378 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 565
5 avril 2013 à 09:27
Salut,

tu peux jeter un oeil à ce tuto simple :
https://openclassrooms.com/fr/courses
1
Réponse 2 / 2
jojojami Messages postés 28 Date d'inscription jeudi 20 septembre 2012 Statut Membre Dernière intervention 21 décembre 2013
8 avril 2013 à 20:30
merci infiniment ;)
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses
Accéder au menu Advanced Bios PC portable HP
Axferd -
Bill -

6 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses