Probleme de superposition de menu
Bonjour,
J'ai un soucis avec un menu déroulant CSS.
Mes entetes de menu sont des images. Les menus déroulants s'affichent, mais le haut est caché par la deuxième image (deuxieme menu), et ce, sous IE, alors que sous Firefox, comme de par hasard, tout s'affiche correctement.
Voici le html :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="dropdown.css" title="default" media="screen" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="dropdown_ie.css" title="default" media="screen" />
<![endif]-->
</head>
<body>
<div class="menu">
<ul>
<li><a class="hide" href="../menu/index.html"><img src="http://mcgiant.free.fr/image.jpg" /></a>
<!--[if lte IE 6]>
<a href="../menu/index.html"><img src="http://mcgiant.free.fr/image.jpg" />
<table ><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li><li><a class="hide" href="index.html"><img src="http://mcgiant.free.fr/image.jpg" ></a>
<!--[if lte IE 6]>
<a href="index.html"><img vspace=0 src="http://mcgiant.free.fr/image.jpg" >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../layouts/index.html"><img src="http://mcgiant.free.fr/image.jpg" ></a>
<!--[if lte IE 6]>
<a href="../layouts/index.html"><img src="http://mcgiant.free.fr/image.jpg" >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../boxes/index.html"><img src="http://mcgiant.free.fr/image.jpg"></a>
<!--[if lte IE 6]>
<a href="../boxes/index.html"><img src="http://mcgiant.free.fr/image.jpg">
<table><tr><td>
<![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../mozilla/index.html"><img src="http://mcgiant.free.fr/image.jpg"></a>
<!--[if lte IE 6]>
<a href="../mozilla/index.html"><img src="http://mcgiant.free.fr/image.jpg">
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../ie/index.html"><img src="http://mcgiant.free.fr/image.jpg"></a>
<!--[if lte IE 6]>
<a href="../ie/index.html"><img src="http://mcgiant.free.fr/image.jpg">
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a class="hide" href="../opacity/index.html"><img src="http://mcgiant.free.fr/image.jpg"></a>
<!--[if lte IE 6]>
<a href="../opacity/index.html"><img border=0 src="http://mcgiant.free.fr/image.jpg">
<table><tr><td>
<![endif]-->
<ul>
<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a>
<!--[if lte IE 6]>
<a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK
<table><tr><td>
<![endif]-->
<ul class="left">
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
</ul>
</div>
</body>
</html> |
Le css spécifique IE :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
|
img { border:0;}
.menu {width:570px; height:100px; position:relative; font-size:11px; }
.menu ul li a.hide, .menu ul li a:visited.hide {display:none; }
.menu ul li a:hover ul li a.hide {display:none; }
.menu ul li a:hover {color:#fff; background-color:transparent; }
.menu ul li a:hover ul {display:block; position:absolute; top:51px; width:105px;left:5px; }
.menu ul li a:hover ul li a.sub {color:#fff;background:#787878 url("") right center no-repeat;}
.menu ul li a:hover ul li a.sub:hover {color:#fff;background:#A1A1A1 url("") right center no-repeat;}
.menu ul li a:hover ul li a {display:block; background:#787878;z-index:inherit; color:#ffffff;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#A1A1A1; color:#ffffff; }
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000; }
.menu ul li a:hover ul li a:hover ul.left {left:-105px; } |
Le css pour les autres navigateurs
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
|
img {border:0;}
.menu {width:590px; height:100px; position:relative; font-size:11px; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#fff; line-height:20px; font-family:Verdana,Arial,Helvetica,Tahoma,sans-serif; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0; list-style: none; border-top:1px solid #FFF; border-right:1px solid #999; border-left:1px solid #FFF; }
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}
.menu ul li ul li a {width:100px;border-bottom:1px solid #999;padding-left:5px}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff;background:#787878; }
.menu ul li:hover ul {display:block;background:#787878;top:51px; position:absolute; border-bottom:1px solid #999; left:5px; width:105px;z-index:1}
.menu ul li:hover ul li a.hide {background:#787878 url("") right center no-repeat; border-bottom:1px solid #999;color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#A1A1A1 url("") right center no-repeat;border-bottom:1px solid #999;color:#fff;}
.menu ul li:hover ul li ul {display: none;background:#787878;}
.menu ul li:hover ul li a {display:block; background:#787878; color:#fff;}
.menu ul li:hover ul li a:hover {background:#A1A1A1; color:#fff;}
.menu ul li:hover ul li:hover ul {display:block;background:#787878;position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;background:#787878;} |
Merci pour vos retours,
:ccool: