1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
| <!DOCTYPE html>
<html>
<head>
<title>menu rampe horizontal ul li imbriqués</title>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta charset="UTF-8">
<style type="text/css">
#fondplan{
position:absolute;
height:99.6%;width:99.7%;
right:0;left:0;top:0 ;
border:solid 2px red;
}
.skSKIN1{
background:#A9E2F3;
background: -ms-linear-gradient(top, rgba(242,245,247,1) 9%,rgba(242,245,247,1) 9%,rgba(174,223,249,1) 25%,rgba(41,137,216,1) 63%,rgba(30,87,153,1) 87%);
}
.skSKIN3{
background: -ms-linear-gradient(top, rgba(239,239,234,1) 0%,rgba(55,55,56,1) 10%,rgba(55,55,56,1) 12%,rgba(44,48,51,1) 29%,rgba(35,46,56,1) 62%,rgba(0,0,0,1) 89%);
}
.skSKIN2{
background: -ms-linear-gradient(top, rgba(151,219,4,1) 2%,rgba(150,219,2,1) 15%,rgba(129,183,3,1) 48%,rgba(129,183,3,1) 48%,rgba(71,99,70,1) 89%);
}
#contmenu{
position:absolute;float:right;
top:100px;right:0;height:30px;width:766PX;
}
ul{
list-style:none;
margin:0;padding:0;
white-space: nowrap;
text-align:center;
}
.SKIN1 .submenu{display:none;}
.SKIN1{
float:LEFT;position:relative;width:250px;
border-radius:10px 10px 0px 0px;border:solid 2px white;
}
.SKIN1 .submenu:last-child{
border-radius:0px 0px 10px 10px;
}
.SKIN1 li{
background:rgba(255,255,255,0.2);height:30px;
}
.SKIN1 .submenu li{
color:white;text-shadow:2px 2px 5px blue;
}
.SKIN1 .submenu li:hover{
background:rgba(0,50,255,0.2);box-shadow:1px 1px 20px rgb(0,200,255);
}
.SKIN1:hover > .submenu{
display:block;
}
.SKIN1:hover > h1{
background:rgba(0,50,255,0.2);color:rgb(0,255,100);
}
.SKIN1:hover{
border-radius: 10px 10px 10px 10px;box-shadow:1px 1px 20px rgb(0,200,255);
}
.SKIN1 h1{
height:30px;width:100%;margin:0;padding:0;
border-radius:10px 10px 0px 0px;color:white;
background:rgba(255,255,255,0.4);text-shadow:2px 2px 5px blue;font-size:20px;
}
</style>
</head>
<body>
<!-============fond pourl'arriere plan'==========!>
<div id="fondplan" class="skSKIN1 fonpl">
</div>
<!-============================================-!>
<nav id ="contmenu">
<ul>
<!--=== Menu pour le choix des voix === -->
<li class="SKIN1 MENU" id="top-toolbarvoix">
<h1>Menu VOIX</H1>
<ul class="submenu">
<li onclick="voxe('hortense')">HORTENSE</li>
<li onclick="voxe('HARMONIE')">HARMONIE</li>
<li onclick="voxe('VIRGINIE')">VIRGINIE</li>
<li onclick="voxe('GOGOLETTE')">GOGOLETTE</li>
</ul>
</li>
<!--=== Menu pour le choix des forum ===-->
<li class="SKIN1 MENU" id="top-toolbarFORUM">
<h1>CHOIX DU FORUM</H1>
<ul class="submenu">
<li onclick="CHOIXFORUM('WINDOWS 7')">WINDOWS 8</li>
<li onclick="CHOIXFORUM('WINDOWS 8')">WINDOWS 7</li>
<li onclick="AJOUTFORUM()">AJOUTER UN FORUM</li>
</ul>
</li>
<!--=== Menu pour le choix du skin === -->
<li class="SKIN1 MENU" id="top-toolbarskin">
<h1>CHOIX DU SKIN</H1>
<ul class="submenu">
<li onclick="CHOIXSKIN('SKIN1')">Style-(-blue seven-) </li>
<li onclick="CHOIXSKIN('SKIN2')">Style-(----wood----)</li>
<li onclick="CHOIXSKIN('SKIN3')">Style-(-dark-inside)</li>
<li onclick="CHOIXSKIN('SKIN4')">Style-(-developpez-)</li>
</ul>
</li>
</ul>
</nav>
</body>
</html> |
Partager