Menu horizontal css
La partie html
<html><head><title>menu déroulant en css</title>
<meta http-equiv=content-type content="text/html; charset=iso-8859-1">
<link type="text/css" rel="stylesheet" href="style_menu_deroulant_horizontal.css" />
</head>
<body>
<div id="monmenu">
<h2>menu à déploiement horizontal</h2>
<ul class=niveau1>
<li>Menu 1
<ul class=niveau2>
<li class=plus>
<a href="#">
Titre du menu 1
</a>
<ul class=niveau3>
<li><a href="#"> Sous titre 1 du menu 1 </a> </li>
<li><a href="#"> Sous titre 2 du menu 1 </a> </li>
<li><a href="#"> Sous titre 3 du menu 1 </a> </li>
<li><a href="#"> Sous titre 4 du menu 1 </a> </li>
</ul>
</li>
<li>
<a href="#">
Titre du menu 2
</a>
<ul class=niveau3>
<li><a href="#"> Sous titre 1 du menu 2 </a> </li>
<li><a href="#"> Sous titre 2 du menu 2 </a> </li>
<li><a href="#"> Sous titre 3 du menu 3 </a> </li>
<li><a href="#"> Sous titre 4 du menu 4 </a> </li>
</ul>
</li>
<li>
<a href="#">
Titre du menu 3
</a>
<ul class=niveau3>
<li><a href="#"> Sous titre 1 du menu 2 </a> </li>
<li><a href="#"> Sous titre 2 du menu 2 </a> </li>
<li><a href="#"> Sous titre 3 du menu 3 </a> </li>
<li><a href="#"> Sous titre 4 du menu 4 </a> </li>
</ul>
</li>
</ul></li></ul>
<ul class=niveau1>
<li>Menu 2
<ul class=niveau2>
<li class=plus>
<a href="#">
Titre du menu 2
</a>
<ul class=niveau3>
<li><a href="#"> Sous titre 1 du menu 2 </a> </li>
<li><a href="#"> Sous titre 2 du menu 2 </a> </li>
<li><a href="#"> Sous titre 3 du menu 2 </a> </li>
<li><a href="#"> Sous titre 4 du menu 2 </a> </li>
</ul>
</li>
<li>
<a href="#">
Titre du menu 2
</a>
<ul class=niveau3>
<li><a href="#"> Sous titre 1 du menu 2 </a> </li>
<li><a href="#"> Sous titre 2 du menu 2 </a> </li>
<li><a href="#"> Sous titre 3 du menu 3 </a> </li>
<li><a href="#"> Sous titre 4 du menu 4 </a> </li>
</ul>
</li>
<li>
<a href="#">
Titre du menu 3
</a>
<ul class=niveau3>
<li><a href="#"> Sous titre 1 du menu 2 </a> </li>
<li><a href="#"> Sous titre 2 du menu 2 </a> </li>
<li><a href="#"> Sous titre 3 du menu 3 </a> </li>
<li><a href="#"> Sous titre 4 du menu 4 </a> </li>
</ul>
</li>
</ul></li></ul>
</div>
La partie css
#monmenu {
font-weight: bold; font-size: 12px; font-family: trebuchet ms,arial,tahoma,verdana,sans-serif
}
#monmenu ul ul {
border-right: #b0b0b0 1px solid; padding-right: 0px; border-top: #b0b0b0 1px solid; display: none; padding-left: 0px; left: 164px; padding-bottom: 0px; margin: 0px; border-left: #b0b0b0 1px solid; padding-top: 0px; border-bottom: #b0b0b0 1px solid; position: absolute; top: -1px
}
#monmenu li {
padding-right: 2px; padding-left: 2px; padding-bottom: 2px; margin: 0px; width: 160px; padding-top: 2px; list-style-type: none; position: relative; background-color: #e0e0e0
}
#monmenu li:hover {
background-color: #ffff70
}
#monmenu li.sfhover {
background-color: #ffff70
}
#monmenu li a {
text-decoration: none
}
#monmenu li:hover ul.niveau2 {
display: block
}
#monmenu li li:hover ul.niveau3 {
display: block
}
#monmenu li.sfhover ul.niveau2 {
display: block
}
#monmenu li li.sfhover ul.niveau3 {
display: block
}
#monmenu li.plus {
background-position: right 50%; border-bottom: #b0b0b0 1px solid; background-repeat: no-repeat
}
La partie html
<html><head><title>menu déroulant en css</title>
<meta http-equiv=content-type content="text/html; charset=iso-8859-1">
<link type="text/css" rel="stylesheet" href="style_menu_deroulant_horizontal.css" />
</head>
<body>
<div id="monmenu">
<h2>menu à déploiement horizontal</h2>
<ul class=niveau1>
<li>Menu 1
<ul class=niveau2>
<li class=plus>
<a href="#">
Titre du menu 1
</a>
<ul class=niveau3>
<li><a href="#"> Sous titre 1 du menu 1 </a> </li>
<li><a href="#"> Sous titre 2 du menu 1 </a> </li>
<li><a href="#"> Sous titre 3 du menu 1 </a> </li>
<li><a href="#"> Sous titre 4 du menu 1 </a> </li>
</ul>
</li>
<li>
<a href="#">
Titre du menu 2
</a>
<ul class=niveau3>
<li><a href="#"> Sous titre 1 du menu 2 </a> </li>
<li><a href="#"> Sous titre 2 du menu 2 </a> </li>
<li><a href="#"> Sous titre 3 du menu 3 </a> </li>
<li><a href="#"> Sous titre 4 du menu 4 </a> </li>
</ul>
</li>
<li>
<a href="#">
Titre du menu 3
</a>
<ul class=niveau3>
<li><a href="#"> Sous titre 1 du menu 2 </a> </li>
<li><a href="#"> Sous titre 2 du menu 2 </a> </li>
<li><a href="#"> Sous titre 3 du menu 3 </a> </li>
<li><a href="#"> Sous titre 4 du menu 4 </a> </li>
</ul>
</li>
</ul></li></ul>
<ul class=niveau1>
<li>Menu 2
<ul class=niveau2>
<li class=plus>
<a href="#">
Titre du menu 2
</a>
<ul class=niveau3>
<li><a href="#"> Sous titre 1 du menu 2 </a> </li>
<li><a href="#"> Sous titre 2 du menu 2 </a> </li>
<li><a href="#"> Sous titre 3 du menu 2 </a> </li>
<li><a href="#"> Sous titre 4 du menu 2 </a> </li>
</ul>
</li>
<li>
<a href="#">
Titre du menu 2
</a>
<ul class=niveau3>
<li><a href="#"> Sous titre 1 du menu 2 </a> </li>
<li><a href="#"> Sous titre 2 du menu 2 </a> </li>
<li><a href="#"> Sous titre 3 du menu 3 </a> </li>
<li><a href="#"> Sous titre 4 du menu 4 </a> </li>
</ul>
</li>
<li>
<a href="#">
Titre du menu 3
</a>
<ul class=niveau3>
<li><a href="#"> Sous titre 1 du menu 2 </a> </li>
<li><a href="#"> Sous titre 2 du menu 2 </a> </li>
<li><a href="#"> Sous titre 3 du menu 3 </a> </li>
<li><a href="#"> Sous titre 4 du menu 4 </a> </li>
</ul>
</li>
</ul></li></ul>
</div>
La partie css
#monmenu {
font-weight: bold; font-size: 12px; font-family: trebuchet ms,arial,tahoma,verdana,sans-serif
}
#monmenu ul ul {
border-right: #b0b0b0 1px solid; padding-right: 0px; border-top: #b0b0b0 1px solid; display: none; padding-left: 0px; left: 164px; padding-bottom: 0px; margin: 0px; border-left: #b0b0b0 1px solid; padding-top: 0px; border-bottom: #b0b0b0 1px solid; position: absolute; top: -1px
}
#monmenu li {
padding-right: 2px; padding-left: 2px; padding-bottom: 2px; margin: 0px; width: 160px; padding-top: 2px; list-style-type: none; position: relative; background-color: #e0e0e0
}
#monmenu li:hover {
background-color: #ffff70
}
#monmenu li.sfhover {
background-color: #ffff70
}
#monmenu li a {
text-decoration: none
}
#monmenu li:hover ul.niveau2 {
display: block
}
#monmenu li li:hover ul.niveau3 {
display: block
}
#monmenu li.sfhover ul.niveau2 {
display: block
}
#monmenu li li.sfhover ul.niveau3 {
display: block
}
#monmenu li.plus {
background-position: right 50%; border-bottom: #b0b0b0 1px solid; background-repeat: no-repeat
}
Aucun commentaire:
Enregistrer un commentaire