Je voudrais avoir une phase ds 1 rubrique?
vivremaroc
Messages postés
111
Date d'inscription
Statut
Membre
Dernière intervention
-
vivremaroc Messages postés 111 Date d'inscription Statut Membre Dernière intervention -
vivremaroc Messages postés 111 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
voila mon code :en (html)
<body>
<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>??? ????? ? ?????</span></a>
<li><a href="#" class="parent"><span>????????</span></a>
<li><a href="#" class="parent"><span>??? ???? ?????</span></a>
<li><a href="#" class="parent"><span>???</span></a>
<li><a href="#" class="parent"><span>???????</span></a>
<li><a href="#" class="parent"><span>?????</span></a>
<li><a href="#" class="parent"><span>?????</span></a>
<li><a href="#" class="parent"><span>?????</span></a>
</li>
<li><a href="#" ><span>?????</span></a>
<ul>
<li><a href="#" ><span>Sub Item 1</span></a>
</li>
<li><a href="#" ><span>Sub Item 2</span></a>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
<li><a href="#"><span>Sub Item 5</span></a></li>
<li><a href="#"><span>Sub Item 6</span></a></li>
<li><a href="#"><span>Sub Item 7</span></a></li>
</ul>
</li>
<li><a href="#" ><span>????? </span></a>
<ul>
<li><a href="#" ><span>Sub Item 1</span></a>
</li>
<li><a href="#" ><span>Sub Item 2</span></a>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
<li><a href="#"><span>Sub Item 5</span></a></li>
<li><a href="#"><span>Sub Item 6</span></a></li>
<li><a href="#"><span>Sub Item 7</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>??????? ????????</span></a></li>
</ul>
</div>
</body>
et celui en css:div#menu {
height:41px;
background:url(images/main-bg.png) repeat-x;
}
div#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: right;
}
div#menu ul.menu {
margin-right:3px;
}
div#menu li {
position: relative;
z-index: 9;
margin: 0;
padding: 0 5px 0 0;
display: block;
float:left;
width:90px;
}
div#menu li:hover>ul {
left: 0px;
}
div#menu a {
position: relative;
z-index: 10;
height: 30px;
display: block;
float: left;
line-height: 41px;
text-decoration: none;
font: normal 12px Trebuchet MS;
text-align:right;
}
div#menu a:hover, div#menu a:hover span { color:#FF9966; }
div#menu li.current a {}
div#menu span {
display: block;
background-repeat: no-repeat;
background-position: 95% 0;
}
div#menu ul ul a.parent span {
background-position:95% 8px;
}
/* menu::level1 */
div#menu a {
padding: 0 10px 0 10px;
line-height: 30px;
color:#ffff;
width:140px;
text-align:center;
}
div#menu span {
margin-top: 5px;
}/**@replace#1*/
div#menu li { background: url(images/main-delimiter.png) 98% 4px no-repeat; }
div#menu li.last { background: none; }
/* menu::level2 */
div#menu ul ul li { background: none; }
div#menu ul ul {
position: absolute;
top: 33px;
left: -999em;
width: 100px;
padding: 5px 0 0 0;
margin-top:1px;
z-index:200;
}
div#menu ul ul a {
text-align:right;
height: auto;
float: none;
display: block;
line-height: 24px;
color: #000;
background: url(images/main-b.png) repeat-x;
width:100px;
}
div#menu ul ul span {
margin-top: 0;
padding-right: 0px;
color:#663399;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
width: 100%;
background: url(images/main-b1.png) repeat-x;
}
/* menu::level3 */
div#menu ul ul ul {
padding: 0;
margin: -38px 0 0 163px !important;
margin-left:172px;
}
/* colors */
div#menu ul ul ul { background: rgb(41,41,41); }
div#menu ul ul ul ul { background: rgb(38,38,38); }
div#menu ul ul ul ul { background: rgb(35,35,35); }
voila mon code :en (html)
<body>
<div id="menu">
<ul class="menu">
<li><a href="#" class="parent"><span>??? ????? ? ?????</span></a>
<li><a href="#" class="parent"><span>????????</span></a>
<li><a href="#" class="parent"><span>??? ???? ?????</span></a>
<li><a href="#" class="parent"><span>???</span></a>
<li><a href="#" class="parent"><span>???????</span></a>
<li><a href="#" class="parent"><span>?????</span></a>
<li><a href="#" class="parent"><span>?????</span></a>
<li><a href="#" class="parent"><span>?????</span></a>
</li>
<li><a href="#" ><span>?????</span></a>
<ul>
<li><a href="#" ><span>Sub Item 1</span></a>
</li>
<li><a href="#" ><span>Sub Item 2</span></a>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
<li><a href="#"><span>Sub Item 5</span></a></li>
<li><a href="#"><span>Sub Item 6</span></a></li>
<li><a href="#"><span>Sub Item 7</span></a></li>
</ul>
</li>
<li><a href="#" ><span>????? </span></a>
<ul>
<li><a href="#" ><span>Sub Item 1</span></a>
</li>
<li><a href="#" ><span>Sub Item 2</span></a>
</li>
<li><a href="#"><span>Sub Item 3</span></a></li>
<li><a href="#"><span>Sub Item 4</span></a></li>
<li><a href="#"><span>Sub Item 5</span></a></li>
<li><a href="#"><span>Sub Item 6</span></a></li>
<li><a href="#"><span>Sub Item 7</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>??????? ????????</span></a></li>
</ul>
</div>
</body>
et celui en css:div#menu {
height:41px;
background:url(images/main-bg.png) repeat-x;
}
div#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: right;
}
div#menu ul.menu {
margin-right:3px;
}
div#menu li {
position: relative;
z-index: 9;
margin: 0;
padding: 0 5px 0 0;
display: block;
float:left;
width:90px;
}
div#menu li:hover>ul {
left: 0px;
}
div#menu a {
position: relative;
z-index: 10;
height: 30px;
display: block;
float: left;
line-height: 41px;
text-decoration: none;
font: normal 12px Trebuchet MS;
text-align:right;
}
div#menu a:hover, div#menu a:hover span { color:#FF9966; }
div#menu li.current a {}
div#menu span {
display: block;
background-repeat: no-repeat;
background-position: 95% 0;
}
div#menu ul ul a.parent span {
background-position:95% 8px;
}
/* menu::level1 */
div#menu a {
padding: 0 10px 0 10px;
line-height: 30px;
color:#ffff;
width:140px;
text-align:center;
}
div#menu span {
margin-top: 5px;
}/**@replace#1*/
div#menu li { background: url(images/main-delimiter.png) 98% 4px no-repeat; }
div#menu li.last { background: none; }
/* menu::level2 */
div#menu ul ul li { background: none; }
div#menu ul ul {
position: absolute;
top: 33px;
left: -999em;
width: 100px;
padding: 5px 0 0 0;
margin-top:1px;
z-index:200;
}
div#menu ul ul a {
text-align:right;
height: auto;
float: none;
display: block;
line-height: 24px;
color: #000;
background: url(images/main-b.png) repeat-x;
width:100px;
}
div#menu ul ul span {
margin-top: 0;
padding-right: 0px;
color:#663399;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
width: 100%;
background: url(images/main-b1.png) repeat-x;
}
/* menu::level3 */
div#menu ul ul ul {
padding: 0;
margin: -38px 0 0 163px !important;
margin-left:172px;
}
/* colors */
div#menu ul ul ul { background: rgb(41,41,41); }
div#menu ul ul ul ul { background: rgb(38,38,38); }
div#menu ul ul ul ul { background: rgb(35,35,35); }
A voir également:
- Je voudrais avoir une phase ds 1 rubrique?
- Ds clock - Télécharger - Bureautique
- Comment réinitialiser nintendogs ds - Forum Jeux vidéo
- Ma ds ne s'allume plus - Forum Jeux vidéo
- Ds elec - Télécharger - Outils professionnels
- Sims 2 naufragés ds solution ✓ - Forum Jeux vidéo