Je travaille actuellement sur un menu en CSS. J'ai trouvé un code intéressant ici et je l'ai adapté à mes besoins.
Sous IE, pas de soucis (normal me direz vous
) sous FireFox, j'ai le sous menu qui prends 100%. J'ai donc mis un "inherit" dans la class "ul#menu ul" mais le résultat ne me conviens pas car le surlignage déborde.Ce que j'aimerais c'est un sous cadre un peu plus grand que son parent mais qui s'affiche correctement sous IE et FF
(pour le début ^_^)Voici le code :
CODE
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul#menu li ul{
display:none;
}
ul#menu li:hover>ul{
display:block;
}
ul#menu{
margin:0px;
padding:0px;
list-style:none;
width:100%;
background:#FFFFFF;
float:left;
font:0.7em Arial;
border:1px solid #CCCCCC;
}
ul#menu hr{
margin-right: 4px;
margin-left: 4px;
}
ul#menu li{
float:left;
display:block;
padding:2px 1px;
width:16%;
}
ul#menu li.first{
padding-left:2px;
}
ul#menu li.last{
padding-right:2px;
}
ul#menu li a{
display:block;
padding:2px 6px;
border:1px solid #CCCCCC;
color:#000000;
text-decoration:none
}
ul#menu li a:hover{
border-top-color:#F0F0F0;
border-left-color:#F0F0F0;
border-right-color:#999999;
border-bottom-color:#999999;
}
ul#menu ul{
position:absolute;
background:#FFFFFF;
list-style:none;
margin-top:2px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
padding:0px;
width:inherit;
z-index:1;
border:1px solid #CCCCCC;
}
ul#menu ul ul{
top:0px;
left:155px;
z-index:2;
}
ul#menu ul li{
position:relative;
float:none;
margin:0px;
padding:0px;
_display:inline;
width:100%;
}
ul#menu ul li a{
display:block;
margin:0px;
padding:0px;
width:100%;
border:none;
}
ul#menu ul li a span{
display:block;
width:100%;
_width:100%;
padding:2px 6px;
margin:0px 2px;
border:none;
cursor:hand;
}
ul#menu ul li a.next:hover span{
background-position: -160px 50%;
border:1px solid #CCCCCC;
}
ul#menu ul li a:hover span{
background-color:#999999;
color:#FFFFFF;
border:none;
}
ul#menu ul li.first{
padding-left:0px;
}
ul#menu ul li.first a{
padding-top:2px;
}
ul#menu ul li.last{
padding-right:0px;
}
ul#menu ul li.last a{
padding-bottom:2px;
background:url(imgmenuencascade/m1.gif) no-repeat left bottom;
}
/*
p{
margin-left:170px;
}
*/
</style>
<script type="text/javascript">
function hover(obj){
if(document.all){
UL = obj.getElementsByTagName('ul');
if(UL.length > 0){
sousMenu = UL[0].style;
if(sousMenu.display == 'none' || sousMenu.display == ''){
sousMenu.display = 'block';
}else{
sousMenu.display = 'none';
}
}
}
}
function setHover(){
LI = document.getElementById('menu').getElementsByTagName('li');
nLI = LI.length;
for(i=0; i < nLI; i++){
LI[i].onmouseover = function(){
hover(this);
}
LI[i].onmouseout = function(){
hover(this);
}
}
}
</script>
</head>
<body onLoad="setHover()">
<ul id="menu">
<li class="first">
<a href="#">Fichier</a>
<ul>
<li class="first"><a href="#"><span>Nouveau</span></a></li>
<li><a href="#"><span>Ouvrir</span></a></li>
<li><a href="#"><span>Enregistrer</span></a></li>
<li><a href="#"><span>Enregistrer sous...</span></a></li>
<li><hr /></li>
<li><a href="#" class="disabled"><span>Imprimer</span></a></li>
<li><hr /></li>
<li class="last"><a href="#"><span>Quitter</span></a></li>
</ul>
</li>
<li>
<a href="#">Edition</a>
<ul>
<li class="first"><a href="#"><span>Annuler</span></a></li>
<li><hr /></li>
<li><a href="#"><span>Couper</span></a></li>
<li><a href="#"><span>Copier</span></a></li>
<li><a href="#"><span>Coller</span></a></li>
<li><hr /></li>
<li class="last"><a href="#" class="disabled"><span>Selectionner tout</span></a></li>
</ul>
</li>
<li class="last">
<a href="#">Affichage</a>
<ul>
<li class="first"><a href="#"><span>Actualiser</span></a></li>
<li><hr /></li>
<li><a href="#"><span>Augmenter la taille du texte</span></a></li>
<li><a href="#"><span>Diminuer la taille du texte</span></a></li>
<li>
<a href="#"><span>Encodage du texte</span></a></li>
<li><hr /></li>
<li class="last"><a href="#"><span>Code source de la page</span></a></li>
</ul>
</li>
</ul>
</body>
</html>
De plus, le border du sous menu ne s'affiche pas toujours....
Merci d'avance
Portekoi
EDIT : j'ai remodifié le code car il y avait un sous sous menu dont je n'ai pas besoin
