0
J'ai écrit un menu CSS pour un site que j'aide à développer, et il s'affiche correctement dans IE 7 et Firefox 3 (sous Windows XP).Le menu CSS s'affiche de manière incorrecte dans Safari
L'effet prévu est que les menus déroulants doivent être aussi larges que l'élément le plus large (mais pas plus large). Dans Safari, cependant, ils semblent être à peu près deux fois plus larges qu'ils devraient l'être. Je n'ai aucune idée de la façon de résoudre ce problème. De l'aide?
Le code HTML est:
<!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></head>
<body>
<div id="mainContainer">
<div id="mainNavContainer">
<img id="leftNavImg" src="imgsrc.jpg" alt="ignore me for now" height="34" width="91">
<div id="topNav">
<ul>
<li><a href="#">Menu Item 1</a><ul>
<li><a href="#">Submenu Item 1.1</a></li>
<li><a href="#">Submenu Item 1.2</a></li>
<li><a href="#">Submenu Item 1.3</a></li>
</ul></li>
<li><a href="#">Menu Item 2</a><ul>
<li><a href="#">Submenu Item 2.1</a></li>
<li><a href="#">Submenu Item 2.2</a></li>
<li><a href="#">Submenu Item 2.3</a></li>
</ul></li>
<li><a href="#">Menu Item 3</a><ul>
<li><a href="#">Submenu Items may have different lengths</a></li>
<li><a href="#">short</a></li>
<li><a href="#">or potentially moderately long</a></li>
<li><a href="#">The submenu should be as wide as its longest item</a></li>
</ul></li>
<li><a href="#">etc...</a><ul>
<li><a href="#">Submenu Item 4.1</a></li>
<li><a href="#">Submenu Item 4.2</a></li>
<li><a href="#">Submenu Item 4.3</a></li>
</ul></li>
</ul>
</div>
</div>
</div>
</body>
et le CSS est
* {
margin: 0;
padding: 0;
}
ul, ol, dl, li, dt, dd {
list-style: none;
}
body {
background-color: #fff;
margin: 20px;
text-align: center;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
#mainContainer {
width: 975px;
background-color: #fff;
text-align: left;
margin: 0 auto;
position: relative;
padding-top: 52px;
}
#mainNavContainer {
height: 34px;
font-size: 11px;
width: 973px;
border: 1px solid #dedede;
background-color: #888;
position: absolute;
top: 0;
color: #000;
}
#mainNavContainer #leftNavImg {
padding: 0 20px 0 7px;
float:left;
border-right:1px solid #dedede;
}
#topNav {
float: left;
}
#topNav ul {
display: inline;
text-align: center;
}
#topNav li {
display: block;
float: left;
position: relative;
border-right: 1px solid #DEDEDE;
width: 102px;
}
#topNav li ul {
display:none;
border-bottom: 4px solid #422952;
position:absolute;
top: 35px;
left:0px;
width: auto;
white-space: nowrap;
text-align: left;
z-index:100;
}
#topNav li li {
display:block;
border-right: none;
border-bottom: 2px solid #622952;
background-color:#FBFBFB;
width: 100%;
font-size: 12px;
}
#topNav li a, #topNav form {
text-decoration: none;
display:block;
color: #000;
padding: 11px 6px;
}
#topNav li li a {
padding: 9px 6px;
color: #666;
width: 100%;
}
#topNav a:hover {
color: #fff;
background-color: #824972;
}
#topNav li:hover ul {
display:block;
z-index:100;
}
#topNav li li a:hover {
background-image:none;
background-color:#fff;
color: #000;
}
Wow. Cela l'a réparé! Merci beaucoup, Oscar. –