Sujet Précédent Sujet Suivant

Menu deroulant horizontal

ivvymata -  
 ivvymata -
Bonjour,
j'ai un problème, j'avais fait le site de notre entreprise avec un menu déroulant horizontal (code css) ca marche avec Mozilla firefox mais le menu reste bloqué avec Internet Explorer et Opera.
Aidez moi s'il vous plait.
voici le code menu.css:

body {
margin: 50px 40px 10px 120px;
float:left;
/*padding:0px -20px 0px -20px;*/

border-bottom: solid 1px #6A8CB2;
border-top: solid 1px #6A8CB2;
border-right: solid 1px #6A8CB2;
border-left: solid 1px #6A8CB2;

}

#menu {
height: 28px;
margin: 0px;
margin: 0px 0.2em 0px 0.2em;
padding: 0px;
font-size:0.77em;
}

#menu ul, #menu li {
background-color: #6B696B;
font-weight:bold;
color:#666;
margin:0px 0.2em 0px 0.2em;
padding:0px;
font-size:1em;
list-style-type: none;/* enléver les puces*/

}

#menu li a {
display: block;
text-decoration: none;
text-align: center;
border: 1px solid #fff;

}

/*---------- Niveau 1 ----------*/
#menu .niveau1 li {
float: left;
margin: 0 -15px 0 0;
width:136.5px;
border: 1px solid #6a8cb2;
background-color: #9a9a9a;
}
#menu .niveau1 li a {
padding: 5px 0;
height: 16px;
color: #fff;
background-color: #6a8cb2;
}

#menu li a:hover, #menu li a:focus, #menu li span:hover, #menu li span:focus, #menu li.encourt a {
color:#FFF;
background-color:#746756;

}
/*---------- Niveau 2 ----------*/

#menu .niveau2 {
position: absolute;
top:-9999em;/* pour faire descendre le menu qui est affiché en haut*/

}

#menu .niveau2 li {
clear: left;
margin: -1px -3.5px 0;
width:150px;
}

#menu .niveau2 li a {
color: #23388a;
background: #d4d4d4;
}
/*#menu .niveau2 li.sousMenu a
{
background: url(images/fleche.gif) 95% 50% no-repeat;
}*/

#menu .niveau2 li a:hover {
color: #fff;
background-color: #A8A5A8;
}
#menu li:hover .niveau2,
#menu .sfhover .niveau2 {
top: auto;
min-height: 0; /* corrige un bug IE7 */
background-color:#D4D4D4;

}
/*---------- Niveau 3 ----------*/
#menu .niveau1 .niveau2 .niveau3 {
position: absolute;
width:139px;
top: -9999em;
border-top: 1px solid #fff; /* corrige un bug IE6 */
}
#menu .niveau3 li a {
color: #336699;
background-color:#d7d3d7;
}

#menu .niveau3 li:hover a,
#menu .niveau3 li a:hover {
color: #746756;
background: #D4D4D4;
}

#menu .niveau2 li:hover .niveau3,
#menu .niveau2 .sfhover .niveau3 {
top: auto;
margin:-29px 0 0 153px;
}

#menu .inverse .niveau2 li:hover .niveau3,
#menu .inverse .niveau2 .sfhover .niveau3 {
top: auto;
margin:-28px 0 0 -149px;
}

#footer{
clear:both;
width:47.2em;
margin: 2px 0px 2px;
margin-left:auto;
margin-right:auto;
margin-bottom:-15px;
}

.marge{
padding:0px 1em 0px 1em;
}

#content {
background:#FFF;
float:left;
width:47.2em;
margin: 5px ;
border-bottom: solid 1px #6A8CB2;
border-top: solid 1px #6A8CB2;
border-right: solid 1px #6A8CB2;
border-left: solid 1px #6A8CB2;
font-family:Verdana;
color:#333333;
font-size:1em;
text-align:left;
}

.tdTout
{
border-bottom: solid 1px #ADADAD;
border-top: solid 1px #ADADAD;
border-right: solid 1px #ADADAD;
border-left: solid 1px #ADADAD;
padding:14px 0px 10px 0px;
font-family:Verdana;
color:#333333;
font-size:1em;
text-transform:uppercase;
text-align:left;

}

.tdClass{
border-right: solid 1px #ADADAD;
}

.tabMainHome
{
margin: 10px;
border-top:solid 1px #ADADAD;
}

.styleSpan{
color:#23388A;
font-weight:bold;
font-family: Verdana, sans-serif;
font-size: 1em;
}

.tdBordure{
border-bottom: solid 1px #ADADAD;

}

.fontSMenu
{
font-size:12px;
font-weight:bold;
font-family:Tahoma;
color:#464646;
text-decoration:none;
/*color:Black;*/
border:0px;
}

.fontSMenu:hover
{
text-decoration:underline;
cursor:pointer;
}

.tdMenu
{
padding-top:10px;
}

.lign{
font-weight:bold;
text-transform:uppercase;
}

.trMenu{
background-color: #6A8CB2;
color: #fff;
font-size:12px;
font-weight:bold;
font-family:Tahoma;
text-align: center;
}

.aMenu
{
font-size:12px;
font-weight:bold;
font-family:Tahoma;
color:#fff;
text-decoration:none;
/*color:Black;*/
border:0px;
}

.aMenu:hovor
{
text-decoration:underline;
cursor:pointer;
}
A voir également:

1 réponse

Réponse 1 / 1
M@dien Messages postés 451 Statut Membre 74
 
Bonjour,

aurais-tu le code HTML correspondant au menu? sans ça c'est pas facile de tester.
0
ivvymata
 
Bonjour, merci de m'avoir répondu.
Le code est long mais j'ai besoin d'aide.
voici le code HTML de mon index que j'ai changé par la suite:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BIENVENUE SUR LE SITE DE SPHINX GROUPE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link type="text/css" rel="stylesheet" media="screen" href="menu.css" title="CSS menu" />

<!--<?php
echo "<link rel=\"stylesheet\" type=\"text/css\" media=\"screen,projection\" href=\"$css.css\" />
?> -->
<!--[if lte IE 7]>
<script type="text/javascript" src="menu.js"></script>
<![endif]-->
<script type="text/javascript" src="fonction.js"></script>
</head>

<body bgcolor="#E9E9E9" background= "images/bg_body.gif" >
<div id="header">
<table width="96%" class="titreMainHome">
<tr>
<table width="80" align="left" >
<tr>
<td width="30% " align="left"><img src="images/logo1.gif" width="280" height="108"></td>
<td align="right" ><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload2.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="474" height="130">
<param name="movie" value="images/romb.swf">
<param name="quality" value="high">
<embed src="images/romb.swf" quality="high" pluginspage="https://get.adobe.com/flashplayer/" type="application/x-shockwave-flash" width="474" height="130"></embed></object>
</td>
</tr>
</table>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td colspan="2"> <div id="menu">
<ul class="niveau1">
<li><a href="index.htm">Accueil</a></li>
<li><a href="quisommesnous.htm">Qui sommes nous?</a></li>
<li> <a href="#">Produits</a>
<ul class="niveau2">
<li class="sousMenu"><a href="#">Vidéo surveillance</a>
<ul class="niveau3">
<li><a href="vidéosurveillance.htm">Camera surveillance</a></li>
<li><a href="accessoires_cam.htm">Accésoires</a></li>
</ul>
</li>
<li> <a href="#">Visioconférence</a>
<ul class="niveau3">
<li><a href="logiciel_visio.htm">Logiciel</a></li>
<li><a href="equipementdebureau.htm">Equipements de bureau</a></li>
<li><a href="equipementdeconference.htm">Equipement de conférence</a></li>
<li><a href="telephonedeconference.htm">Téléphone de conférence</a></li>
<li><a href="telephoneIP.htm">Téléphonie IP</a></li>
</ul>
</li>
<li><a href="#">Anti incendie</a>
<ul class="niveau3">
<li><a href="detecteurs.htm">Detecteurs d'incendie</a></li>
<li><a href="accessoires_inc.htm">Accessoires</a></li>
</ul>
</li>
<li><a href="#">Anti intrusion</a>
<ul class="niveau3">
<li><a href="detecteursansfil.htm">Detecteurs sans fil</a></li>
<li><a href="sirene.htm">Sirène d'alarmes</a></li>
<li><a href="accessoires_intrusion.htm">Accessoires</a></li>
</ul>
</li>
<li><a href="#">Accès magnetique</a>
<ul class="niveau3">
<li><a href="controleur.htm">Contrôleur d'accès</a></li>
<li><a href="logiciel_acces.htm">Logiciel d'accès</a></li>
<li><a href="biometrie.htm">Biometrie</a></li>
<li><a href="equipement.htm">Equipements de contrôle</a></li>
<li><a href="badges.htm">Badges</a></li>
</ul>
</li>
<li><a href="#">Equipements electriques</a>
<ul class="niveau3">
<li><a href="analyseur de reseaux.htm">Analyseurs de réseaux</a></li>
<li><a href="rephasage.htm">Rephasage et harmonique</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Support technique</a>
<ul class="niveau2">
<li><a href="maintenance.htm">Maintenance</a></li>
<li> <a href="installation.htm">Installation</a></li>
<li><a href="assistance.htm">Assistance et conseil</a></li>
<li><a href="demande d'intervention.htm">Demande d'intervention</a></li>
</ul>
</li>
<li> <a href="partenaires.htm">Partenaires</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul></li>
</ul> </div>
<div style="clear:left;height:0px;">
<!-- bug ie -->
</div>
<div id="outer_wrapper" class="clearfix">
<div id="content">
<div class="marge" align="center">
<p>
<table align="left" height="100px" width="100%" >
<tr valign="top">

<td valign="top" width="28%">
<table frame="border" bordercolor="#6a8cb2">
<tr>
<td class="tdMenu"><img src="images/puce_v2.gif"></td>

<td class="tdMenu"><font size="2"><a href="index.htm" class="fontSMenu">Références</a></font></td>
</tr>
<tr>
<td class="tdMenu"><img src="images/puce_v2.gif"></td>

<td class="tdMenu"><font size="2"><a href="services.htm" class="fontSMenu">Services</a></font></td>
</tr>

<tr>
<td class="tdMenu"><img src="images/puce_v2.gif"></td>

<td class="tdMenu"><font size="2"><a href="conditions.htm" class="fontSMenu">Conditions de vente</a></font></td>
</tr>
<tr><td class="tdMenu"><img src="images/puce_v2.gif"></td>
<td class="tdMenu"><font size="2"><a href="formation.htm" class="fontSMenu">Formation</a></font></td></tr>
<tr><td class="tdMenu"><img src="images/puce_v2.gif"></td>
<td class="tdMenu"><font size="2"><a href="tourisme.htm" class="fontSMenu">Tourisme</a></font></td></tr>
<tr><td class="tdMenu"><img src="images/puce_v2.gif"></td>
<td class="tdMenu"><font size="2"><a href="webmail/" class="fontSMenu">Mail</a></font></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
</td>

<td width="72%">
<table>


<tr>
<td>
<table>
<tr>

<td align="left"><font size="2">Née des nouvelles
technologies, la société SPHINX GROUPE implantée
au Mali, vous propose aujourd'hui <span class="styleSpan">la création
de site informatique,des solutions logiciels et
matériels sous forme de "clés en main",la vente
et installation d'équipements de vidéo surveillance,
de visioconférence et électrique,des contrats
de maintenance </span> sur tout type de matériels et périphériques.
Le SPHINX GROUPE est une entreprise qui vise
le développement de l’information et de la télécommunication. <p></p>
Ambitieuse de mettre en valeur ces services dans
le monde entier, elle dispose d’une compétence
technique de haut niveau et une variété de services
destinées aux grandes, moyennes et petites entreprises
ainsi que les associations.<p></p>
<b>Notre maitre mot, le sur mesure</b><br>

Quel que soit le site à équiper, la solution technique ne peut être la même. C'est pourquoi notre expérience nous permet de vous conseiller dans le choix du matériel, qui doit répondre au mieux à la spécificité de votre site, vos impératifs et vos exigences.
<p></p>
Des contrats adaptés à chaque budget et situation(Hôpitaux, grands ensembles de bureaux et nombreux autres), font de nous une entreprise sérieuse et rigoureuse.


</font></td>


</tr>


</table>
</td>
</tr>
</table>
</td>


</tr>
</table>



</p>
</div>
</div>
</div>
<div id="footer" align="center">
<p><small style="color:#666666""><small>
<center>
Copyright © 2009 SPHINX GROUPE SARL
</center>
</small></small> </p>
</div></td>
</tr>
</table>
</div>

</body>
</html>
0

Discussions similaires

TV continental Edison bloqué sur le menu
Utilisateur anonyme -
jeannets -

1 réponse
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Suppression listes déroulantes
Archa -
Sam -

5 réponses
menu caché
laurent -
ChariduP -

7 réponses
supprimer une liste déroulante
fred94 -
m@rina -

5 réponses