28220 sujets

CSS et mise en forme, CSS3

Menu avec sous menu en css marche pas sous IE...

Bonjour,

Suis un petit nouveau from Québec Smiley cligne

Voila j'ai voulu prendre le menu disponible ici : http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-avec-commentaires-au-survol

et rajouter des sous menus en dessous, mais bon à cause de la balise A c'est un peu compliqué.

En plus de ca j'ai fait un truc qui mémorise la selection (genre j'ai cliqué sur le menu, la page se recharge et avec un ou deux DIV par cim par la, je change le style de l'option séléctionné

Bref je veux pas de JS juste du CSS, donc ca rajoute des trucs de partout, mais ce n'est pas grave je me débrouillerais avec le php.

Ceci dit, sous IE ca ne passe bien sur grrr.. et comme j'ai fait un code tout croche, peut être quelqu'un de courageux pourrait jeter un oeil à mon code ? (je dis courageux car j'ai codé à l'arrache et comme ca passait sous firefox je voulais faire propre, mais ave IE suis trop dégouté)

Voici le code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

<!--

ul {
list-style-type: none;
margin:0;
padding:0;
position: absolute;
top: 2em;
left: 3em;
width: 100%; /* précision pour Opera */
}

li {float: left;}

.menu a {
padding:0px 2px;
height: 20px;
float: left;
display: block;
text-align: center;
border: 1px solid #fff; 
text-decoration: none;
color: #000;
background: #fff;

}

.menu a:hover {
color: #411;
background: #AAA;
border: 1px solid gray; 
border-bottom: 0px;
color: #fff;
}

.menu a span {
display: none;
}

.menu a:hover span {
display: block;
position: absolute;
top: 20px;
left: 0;
width: 600px;
text-align: left;
border-top: 1px solid gray;
color: #000;
background: #fff;
 z-index: 10;
height:40px;
}

#selection a div {
display: inline;
position: absolute;
top: 20px;
left: 0;
width: 600px;
text-align: left;
border-top: 1px solid gray;
color: #000;
 z-index: 1;
}

a#sub {
height: 20px;
display: block;
color: red;
background: #fff;
border:1px solid black;

}

a#select {
display: inline;
color: #411;
background: #AAA;
border: 1px solid gray; 
border-bottom: 0px;

}


a#subselect {
display: inline;
color: black;
background: gray;
border-bottom: 0px;
}

-->

</style></head>


<body>

<ul class="menu">
<li><a href="">Menu 1<span>Texte bidon</span></a>
<li id="selection"><a href="" id="select">Tres Tres Tres Long Menu 2<div>
  <a href="www.frxoops.org" id="sub">sousmenu1</a>
  <a href="www.voila.fr" id="subselect" >sousmenu2</a>
  <a href="www.frxoops.org" id="sub">sousmenu3</a></div></a></li>
<li><a href="">Menu 3<span>Cras 
    fringilla. Integer in neque. Nulla massa. Vestibulum eleifend mattis erat</span></a></li>
<li><a href="">Menu 4<span>Sed bibendum vehicula sem. Donec venenatis diam eu 
    erat. Ut rutrum sem ut erat</span></a></li>
<li><a href="">Menu 5<span>Phasellus tristique, 
    turpis in nonummy luctus, eros enim pellentesque felis, sed venenatis quam 
    orci quis nisl. Nulla id nunc. Nam porttitor volutpat erat <em>can't</em> she 
    do?</span></a></li>
<li><a href="">Menu 6<span>Dernière phrase bidon !</span></a></li>
</ul>
</body></html>


Merci
Sujet clos
Aller à