J'ai un grand soucis avec le développement d'un menu en html et css, il ne s'affiche pas sur IE6 par contre sur les autres navigateurs il fonctionne a merveille
et voici le css
merci a tous
<div id="nav">
<ul id="mainmenu">
<li class="home"><a href="#">الصفحة الرئيسية</a></li>
<li class="products"><a href="#"><span>المنشورات</span></a>
<ul class="hide-mobile">
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
</ul>
</li>
<li class="rentrer"><a href="#"><span>العودة المدرسية</span></a>
<ul class="hide-mobile">
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
</ul>
</li>
<li class="press"><a href="#">التزود بالكتب</a>
<ul class="hide-mobile">
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
</ul>
</li>
<li class="company"><a href="#">التزود عن بعد</a>
<ul class="hide-mobile">
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
</ul>
</li>
<li class="b2b"><a href="#">خدمات التوريد</a>
<ul class="hide-mobile">
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
</ul>
</li>
<li class="b2b"><a href="#">تحميل</a>
<ul class="hide-mobile">
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
</ul>
</li>
<li class="b2b"><a accesskey="6" href="#">إتصل بنا</a>
<ul class="hide-mobile">
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
<li><a href="#">طلب عروض خاص باقتناء</a></li>
</ul>
</li>
<!--<li class="support"><a title="Support" href="/support/">Support</a></li>-->
</ul>
</div>
et voici le css
/* --------------------------------------------------------------
* default typography
-------------------------------------------------------------- */
/* Font size definition: the line-heights and vertical margins
are automatically calculated from this.
The percentage is of 16px (0.75 * 16px = 12px) */
@font-face {
font-family:ae_AlArabiya;
src: url("../fonts/ae_AlArabiya.ttf") format("True Type Fonts");
}
#nav{
font-family:ae_AlArabiya, Tahoma, Geneva, sans-serif;
height:38px;
direction:rtl;
}
#page {
height:38px;
width:960px;
}
/* top menu */
#nav ul#mainmenu {
line-height:33px;
list-style:none inside none;
background: url('../images/BG_menu.jpg') repeat-x 0% 100%;
height:38px;
min-height:38px;
height:auto !important;
position:relative;
z-index:998;
}
#nav ul#mainmenu li a {
max-height:38px;
}
#nav li {
font-size:17px;
color:#fff;
position:relative;
float:right;
list-style-image: none;
}
#nav li span {
background-color:transparent;
/* background-color:rgba(44,44,44,0.5);*/
}
#nav li.dl span {
background-color:transparent;
text-decoration: underline;
}
#nav li a {
display:block;
padding:0 20px;
height:38px;
color:#fff;
text-decoration:none;
white-space:nowrap;
}
#nav li.on, #nav li:hover {
background:transparent url('../images/over.png') no-repeat 50% 100%;
}
#nav li.support {
text-indent: -999em;
width:17px;
float:right;
}
#nav li.support a {
background:url('../images/support_01.png') no-repeat 0 0;
padding:0;
}
#nav li.support a:hover {
background-position: -17px 0;
}
/* Top menu dropdowns */
#nav li ul {
text-shadow:0 1px 0 #000, 0 1px 4px #fbb6b6;
position: absolute;
z-index: 999;
min-width: 150px;
background-color: #CC0F16;
color: #fff;
top: 38px;
list-style: none;
margin: 0 0 0 -999em;
padding: 5px 0;
background-image: none;
opacity: 0;
transition: opacity 0.25s ease-out;
-webkit-transition: opacity 0.25s ease-out;
-moz-transition: opacity 0.25s ease-out;
text-align:right;
}
#nav li:hover ul, #nav li:active ul, #nav li.sfhover ul {
margin-left: 0;
opacity: 1;
}
#nav li ul li,#nav li ul li:hover {
min-width:150px;
font-size:16px;
float: none;
margin: 0;
padding: 0;
background: transparent none;
}
#nav li ul li + li {
border-top: 1px dotted #FF473F;
border-collapse: collapse;
}
#nav li ul a, #nav li.on ul a {
padding: 1em;
margin:0;
height: auto;
color: #fff;
line-height: 1em;
display: block;
background-image: none;
}
#nav li ul a:hover, #nav li ul a:focus, #nav li ul a.sffocus {
color: #fff;
background-color: #900;
background-image: none;
}
#nav li ul li.dl {
border: 0;
background-color: #333;
}
#nav li ul li.dl a {
background: #444 url('../images/dlcircle.png') no-repeat 97% 12px;
}
#nav li ul li.dl {
border-top: 1px dotted #666;
}
#nav li ul li.dl:hover, #nav li ul li.dl:hover a {
background-color: #900;
background-position: 97% -28px;
}
#nav li ul li.dl b {
display: block;
}
.home, .products, .rentrer, .press, .company, .b2b{
border-left:1px solid #619fc4;
height:36px;
}
merci a tous