Citation :
<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.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.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>
|
