<html xmlns=" http://www.w3.org/1999/xhtml " lang="zh-CN">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Démonstration du menu CSS</title>
<style type="text/css">
<!--
*{marge :0 ;padding :0;bordure :0;}
corps {
famille de polices : arial, 宋体, serif ;
taille de police : 12 px ;
} #nav {
hauteur de ligne : 24 px ; type de style de liste : aucun ; arrière-plan : #666 ;
} #nav un {
affichage : largeur du bloc : 80 px ; texte-align : centre ;
} #nav a:lien {
couleur : #666 ; décoration du texte : aucune ;
}
#nav a:visité {
couleur : #666 ; décoration de texte : aucune ;
}
#nav a: survolez {
couleur : #FFF ; décoration de texte : aucune ; poids de police : gras ;
} #navli {
flottant : gauche ; largeur : 80 px ; arrière-plan :#CCC ;
}
#nav li a:survoler{
arrière-plan : #999 ;
}
#navliul{
hauteur de ligne : 27 px ; type de style de liste : aucun ; alignement du texte : gauche ;
gauche : -999em ; largeur : 180px ; position : absolue ;
}
#nav li ul li{
flottant : gauche ; largeur : 180 px ;
arrière-plan : #F6F6F6 ;
} #nav li ul a{
affichage : largeur du bloc : 156 px ; alignement du texte : gauche ;
} #nav li ul a:lien {
couleur : #666 ; décoration du texte : aucune ;
}
#nav li ul a:visité {
couleur : #666 ; décoration de texte : aucune ;
}
#nav li ul a:hover {
couleur : #F3F3F3 ; décoration du texte : aucune ; poids de la police : normal ;
arrière-plan : #C00 ;
} #nav li:survolez ul {
à gauche : automatique ;
}
#nav li.sfhover ul {
à gauche : automatique ;
}
#contenu {
clair : gauche ;
} -->
</style> <script type=text/javascript><!--//--><![CDATA[//><!--
fonction menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
pour (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=fonction() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=fonction() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\b"), "");
}
}
}
window.onload=menuFix; //--><!]]></script> </tête>
<corps> <ul id="nav">
<li><a href="#">Présentation du produit</a>
<ul>
<li><a href="#">Produit 1</a></li>
<li><a href="#">Produit 1</a></li>
<li><a href="#">Produit 1</a></li>
<li><a href="#">Produit 1</a></li>
<li><a href="#">Produit 1</a></li>
<li><a href="#">Produit 1</a></li>
</ul>
</li>
<li><a href="#">Présentation du service</a>
<ul>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 2Service 2</a></li>
<li><a href="#">Service deux service deux service deux</a></li>
<li><a href="#">Service 2</a></li>
</ul>
</li>
<li><a href="#">Histoires de réussite</a>
<ul>
<li><a href="#">Cas 3</a></li>
<li><a href="#">Cas</a></li>
<li><a href="#">Cas 3Cas 3</a></li>
<li><a href="#">Troisième casCas troisCas trois</a></li>
</ul>
</li>
<li><a href="#">À propos de nous</a>
<ul>
<li><a href="#">Nous quatre</a></li>
<li><a href="#">Nous quatre</a></li>
<li><a href="#">Nous quatre</a></li>
<li><a href="#">Nous quatre 111</a></li>
</ul>
</li> <li><a href="#">Démo en ligne</a>
<ul>
<li><a href="#">Démo</a></li>
<li><a href="#">Démo</a></li>
<li><a href="#">Démo</a></li>
<li><a href="#">DémoDémoDémo</a></li>
<li><a href="#">DémoDémoDémo</a></li>
<li><a href="#">Démo</a></li>
<li><a href="#">DémoDémoDémo</a></li>
<li><a href="#">DémoDémoDémo</a></li>
</ul>
</li>
<li><a href="#">Contactez-nous</a>
<ul>
<li><a href="#">ContactContactContactContact</a></li>
<li><a href="#">ContactContact</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">ContactContact</a></li>
<li><a href="#">ContactContact</a></li>
</ul>
</li> </ul> </corps>
</html> | 