Chers alsanautes,
J'essaye de réaliser un menu horizontal déroulant bien sans mal. Quelques problèmes pour le centrer mais résolu. J'essaye aujourd'hui d'appliquer une couleur différente pour chaque bouton du menu et pour le sous menu une couleur identique au menu auquel il correspond. Je penser pouvoir l'appliquer à une balise <ul> mais cela ne fonctionne pas (possibilité de l'appliquer à chaque balise <a> mais cela me semble lourd) donc je sollicite votre aide
Ci joint le code de la page test
Merci
[/i][/i]
J'essaye de réaliser un menu horizontal déroulant bien sans mal. Quelques problèmes pour le centrer mais résolu. J'essaye aujourd'hui d'appliquer une couleur différente pour chaque bouton du menu et pour le sous menu une couleur identique au menu auquel il correspond. Je penser pouvoir l'appliquer à une balise <ul> mais cela ne fonctionne pas (possibilité de l'appliquer à chaque balise <a> mais cela me semble lourd) donc je sollicite votre aide
Ci joint le code de la page test
<html>
<head>
<title>Liste 8</title>
<style type="text/css">
body { text-align: center; }
/*div {
width: 900px;
padding-left: 100px;
padding-right:auto;
border: 1px solid;
} */
#Menu {
font-family: Arial, sans-serif;
font-size : 20px; /* hauteur du texte : 20 pixels */
height: 200px;
border: 1px solid;
}
#Menu ul {
margin: 0 auto; /* Aligning div horizontally */
width:800px; /* When aligning using the method above we must set a specific width */
list-style: none;
padding: 0;
line-height: 30px;
height: 30px;
}
#Menu li {
text-align: center;
float: left;
margin: 0 5px 0 5px; /* top right bottom left */
line-height: 30px;
width: 130px; /* Fixed width on the link, the same width as the image width */
}
#Menu li a {
display: block;
height: 30px;
color: black;
font-weight:bold;
text-decoration: none;
/*background-color: purple;*/
-moz-border-radius : 10px 10px;
}
#menu li ul { /* Sous-listes */
position: relative;
top: 3px;
left: 10px;
display: none;
list-style: none;
width: 130px;
text-align: center;
}
#menu li ul li {
float: none;
margin: 0;
padding: 0;
}
#menu li ul li a {
display: block;
}
#menu li:hover ul {/* Sous-listes lorsque la souris passe sur un élément de liste */
display: block;
/* min-height: 0; /* Corrige un bug sous IE */
}
#Menu li a:hover {
background-color: #369;
}
#Menu li a.company
background-color: yellow;
}
.product {
background-color: blue;
}
.application {
background-color: red;
}
.video {
background-color: orange;
}
.contact {
background-color: green;
}
</style>
<!--[if lte IE 6]>
<script type="text/javascript">
<!--
METTRE LE JAVASCRIPT EN COMMENTAIRES POUR QUE LE SCRIPT SOIT VALIDE W3C
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
-->
</script>
<![endif]-->
</head>
<body>
<div id="menu">
<ul>
<li > /* définir la classe a appliquer à cette balise */
<a class="company" href="#">Company</a>
<ul >
<li><a class="company" href="#">History</a></li> /* etc mais semble lourd */
<li><a href="#">Press</a></li>
<li><a href="#">Autre</a></li>
</ul>
</li>
<li >
<a class="product" href="#">Products</a>
<ul>
<li><a href="#">Essai 1</a></li>
<li><a href="#">Essai 2</a></li>
</ul>
</li>
<li>
<a class="application" href="#">Applications</a>
<!-- <ul>
<li><a href="#">photos</a></li>
<li><a href="#">vidéos</a> </li>
</ul>-->
</li>
<li>
<a class="video" href="#">Videos</a>
<!-- <ul>
<li><a href="#">Essai 1</a></li>
<li><a href="#">Essai 2</a></li>
</ul>-->
</li>
<li> <a class="contact" href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Merci
[/i][/i]