Menu deroulant overmouse avec cadre

steve-elipz Messages postés 148 Date d'inscription   Statut Membre Dernière intervention   -  
steve-elipz Messages postés 148 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour a tous,

j ai suivi pleins de forum pour ce menu mais rien ne correspond...

j aimerai que quand je passe sur "projets" ca deroule vers le bas disont a,b,c

projet serai juste ecrit en blanc (pas de fond ni rien), et que a b et c soit avec un fond noir (cadre) exemple du resultat sur :http://www.opel.be/fr/Showroom/Default.aspx?campaignid=ppc08opel&advertiserid=googlebefr&bannerid=Opel&gclid=CLGckcyw5K8CFUdItAodL3yrLw

quand on passe sur nos modeles

merci beaucoup pour votre aide



A voir également:

3 réponses

Réponse 1 / 3
wAxxx Messages postés 421 Date d'inscription   Statut Membre Dernière intervention   46
 
Bonjour,

J'ai modifié un peu ce que tu veux j'espère que cela peut t'aider. Voilà le code html de menu 
<link type="text/css" href="css.css" rel="Stylesheet"/>
     <ul class="menu">
            <li><span class="topitm" id="tmnHome"><a id="S_S_C_C__29b8ee4_TL1" href="#" target="_self">Menu principal 1</a></span></li>

            <li><span class="topitm" id="tmnShow"><a id="S_S_C_C__29b8ee4_TL2" href="#" target="_self">Menu principal 2</a></span>
               <ul>
                  <li><a id="S_S_C_C__29b8ee4_ML0" href="#">Niveau 2</a></li>
                  <li><a id="S_S_C_C__29b8ee4_ML1" href="#">Niveau 2</a>

                     <ul>
                        <li><a id="S_S_C_C__29b8ee4_PCs_ctl00_ML" href="#">Niveau 3</a></li>
                        <li><a id="S_S_C_C__29b8ee4_PCs_ctl01_ML" href="/fr/Showroom/Corsa/Default.aspx">Niveau 3</a></li>
                     </ul>
                  </li>
                  <li><a id="S_S_C_C__29b8ee4_ML2" href="/fr/Showroom/CV.aspx">Menu principal 3</a>
                     <ul>
                        <li><a id="S_S_C_C__29b8ee4_CVs_ctl00_ML" href="/fr/Showroom/Corsa_Van/Default.aspx">nIVEAU 2</a>
                        </li>
                     </ul>
                  </li>
               </ul>
            </li>
            <li><span class="topitm" id="tmnFleet"><a id="S_S_C_C__29b8ee4_TF" href="/fr/Fleet/Default.aspx" target="_self">mENU PRINCIPAL 4</a></span>
                <ul>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink1" href="/fr/Fleet/Default.aspx">mENU 2</a></li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink2" href="/fr/Fleet/WhoAreWe.aspx">mENU 2</a></li>



                    <li><a id="S_S_C_C__29b8ee4_HyperLink6" href="/fr/Fleet/News.aspx">mENU 2</a>

                  </li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink7" href="/fr/Fleet/Newsletter.aspx">mENU 2</a></li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink3" href="#">mENU 2</a></li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink4" href="#">mENU 2</a></li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink11" href="#">mENU 2</a></li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink12" href="#">mENU 2</a>

                        <ul>

                            <li><a id="S_S_C_C__29b8ee4_HyperLink13" href="#">mENU 2</a></li>

                            <li><a id="S_S_C_C__29b8ee4_HyperLink14" href="#">mENU 2</a></li>

                            <li><a id="S_S_C_C__29b8ee4_HyperLink15" href="#">Governmental sales</a></li>

                        </ul>

                    </li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink18" href="/fr/Fleet/DiplomaticSales.aspx">Niveau 2</a></li>

                    <li><a id="S_S_C_C__29b8ee4_HyperLink5" href="/fr/Fleet/Contact.aspx">Niveau 2</a></li>

                </ul>

            </li>

                 </ul>


Et voilà le feuille de style (css.css) 
@charset "UTF-8";


/*
====================================================================================================
=== DROPDOWN MENU ==================================================================================
=== 
=== li.hover and li:hover
=== 
=== We have to use javascript to change class of li when they are hovered because
=== IE6 don't read the li:hover .
=== I have duplicated use of li:hover and li.hover for the few case where user have javascript
=== desactived. That way , menu continue working in other browser than ie6.
==
====================================================================================================
*/

/*
====================================================================================================
=== Support for the "iehover-fix.jsé ===============================================================
====================================================================================================
*/
/** Support for the "iehover-fix.js" **/
ul.menu{position:relative;}
ul.menu ul{background:#fff;}
ul.menu iframe {
   position: absolute;
   left: 0;
   top: 0;
   z-index: -1;
   filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
   background: red;
}
/** end **/

/*
===============================================
=== MAIN MENU =================================
===============================================
*/
.menu {
   width: 860px;
   float:left;
   display:inline;
   margin: 0;
   z-index: 999;
   color:#000 !important;
}

.menu li {
   list-style: none;
   display: inline;
   position: relative;
   z-index: 100;
   margin: 0 30px 0 0;
   float: left;
   cursor: pointer;
}
.menu li span {
   height: 28px;
   float:left;
   display:inline;
}

.menu li a {
   height: 28px;
   display:block;
   padding: 0 0 0 0;
   color: #000;
   font-size: 17px;
   font-weight: bold;
   text-decoration: none;
   outline: none;
   float: left;
}

.menu li .topitm a
{
   font-weight: normal;
}

.menu li .topitm a.hover
{
    font-weight: bold;
}

.menu li .topitm a:hover
{
    color: #febe10; 
}


/*
===============================================
=== SUBMENU ===================================
===============================================
*/
.menu li ul {
   
   background-color: #fff;
   top: 28px;
   padding: 6px 0px 10px 0px;
   margin-left:-5px;
   left: 0;
   display:none;
   float:left;
   width: auto;
   color:#fff;
   background-color:#000;
}
.menu li:hover ul,
.menu li.hover ul {
   display:inline;
   position: absolute;
   background: #0b0c0d url(/images/layout/public/menu/submenu_backgroundV2.png) top repeat-x;
   width:auto;
}

.menu li ul li {
   padding: 6px 0px 0px 0px;
   float:none;
   margin:0;
   clear:both;
   position: static;
   
}

/*width is controlled from here */
.menu li:hover ul li a,
.menu li.hover ul li a {
 white-space: nowrap;
   height: 19px;
   height: auto !important;
   line-height: 25px;
   padding: 0 20px;
   color: #fff;
   font-size: 11px;
   font-weight: normal;
   float:none;
   width: auto;
}

/* cufon submenu fix */

.cufon .cufon-canvas
{
    height:auto !important;
}

/*
===============================================
=== SECOND SUBMENU ============================
===============================================
*/

.menu li:hover ul li:hover a,
.menu li.hover ul li.hover a {
   color: #fff;
   background-color: #878b8e;
}

.menu li:hover ul li ul,
.menu li.hover ul li ul {
   top:0px;
   margin-left:2px;
   left: 100%;
   display:none;
   width:auto;
}

.menu li:hover ul li:hover ul,
.menu li.hover ul li.hover ul {
   position: absolute;
   display:block;
}

.menu li:hover ul li:hover ul li a,
.menu li.hover ul li.hover ul li a {
   color: #fff;
   background: none;
   padding-right:70px;
}

.menu li:hover ul li:hover ul li:hover a,
.menu li.hover ul li.hover ul li.hover a {
   color: #fff;
   background-color: #888;
}

/*
===============================================
=== THIRD SUBMENU =============================
===============================================
*/
.menu li:hover ul li:hover ul li ul,
.menu li.hover ul li.hover ul li ul {
   width: 282px;
   padding: 2px 2px 0px 2px;
   font-weight: bold;
   font-size: 12px;
   display:none;
   position: static;
   z-index: 9999;
   background:#0b0c0d url(/images/layout/public/menu/submenu_box_background.png) top repeat-x;
   height:auto;
   margin-bottom:0px;
}

.menu li:hover ul li:hover ul li ul img, 
.menu li.hover ul li.hover ul li ul img 
{
}

.menu li:hover ul li:hover ul li:hover ul,
.menu li.hover ul li.hover ul li.hover ul{
	position: absolute;
}

.menu li:hover ul li:hover ul li ul li,
.menu li.hover ul li.hover ul li ul li {
   width: 282px;
   padding: 0;
   float:left;
   padding: 0;
   cursor: auto;
   top: 0px;
}
ul.card .info h3{
	font-size: 20px;
	color:#febe10;
   text-transform: uppercase;
}
ul.card .info p.teal
{
    color:#febe10;
}

ul.card .info{
   padding: 5px 10px 5px 10px;
   width: 262px;
   overflow: hidden;
   margin: 0;
   height:auto;
}
ul.card #links{
   border-top: 1px solid #545454;
   padding-bottom:5px;
}

.teal
{
    color:#fff;
}
.menu li:hover ul li:hover ul li ul.card li div#links a,
.menu li.hover ul li.hover ul li ul.card li div#links a {
   color: #fff;
   font-size: 11px;
   display: block;
   line-height: normal;
   background: none;
   margin:  5px 10px 5px 10px;
   padding: 7px 0 0 10px;
   background: url(/images/layout/public/menu/arrow_bullet.png) left bottom no-repeat;
   height:auto;
}

.menu li:hover ul li ul li ul.card li div#links a:hover{
	color: #ffa800;
}

ul.card .price-bar {
   padding:  8px 0;
   margin: 0 auto;
   font-size: 11px;
   width: 262px;
   overflow: hidden;
   font-weight: normal;
   border-top: 1px solid #545454;
}

ul.card .price-bar span {
   margin: 0;
   height: auto;
   display: inline;
   padding: 0 5px 0 10px;
}
ul.card .price-bar .info {}

ul.card .price-bar .price,
ul.card .price-bar .price { font-size: 11px;}

.menu li:hover ul li:hover ul li:hover ul,
.menu li.hover ul li.hover ul li.hover ul { display:block; }
0
Réponse 2 / 3
steve-elipz Messages postés 148 Date d'inscription   Statut Membre Dernière intervention  
 
oula j ai un gros soucis avec le code, meme si je te remercie enormenent d avoir repondu cela ne fonctionne pas meme sans le css
0
wAxxx Messages postés 421 Date d'inscription   Statut Membre Dernière intervention   46
 
Tu utilise quoi ? IE ça marche pas j'ai testé maintenant mais ça marche bien sous Chrome et Firefox.
a tu ajouter le lien vers le css?
0
steve-elipz Messages postés 148 Date d'inscription   Statut Membre Dernière intervention  
 
ie... lol
0
Réponse 3 / 3
steve-elipz Messages postés 148 Date d'inscription   Statut Membre Dernière intervention  
 
j ai ca mais le titre a un fond hors j en veux pas comment faire?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menu déroulant en Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style>
#niveau_1{
width:170px;
background-color:red;
padding-left:20px;
}
#niveau_2{
width:170px;
background-color:red;
padding-left:20px;
}
#niveau_3{
width:170px;
background-color:red;
padding-left:20px;
}

</style>

</head>

<script>
function sous_menu_ouvre(_sous_menu) {
_sous_menu.style.display='block';
}
function sous_menu_ferme(_sous_menu) {
_sous_menu.style.display='none';
}

</script>

<body>

<ul style="list-style-type:square">
<li onMouseOver="sous_menu_ouvre(document.getElementById('niveau_1_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_1_in'));" id="niveau_1" style="float:left">
menu 1</li>
<ul id="niveau_1_in" style="display:none">
<li onMouseOver="sous_menu_ouvre(document.getElementById('niveau_11_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_11_in'));" id="niveau_11">
menu 1.1</li>
<li onMouseOver="sous_menu_ouvre(document.getElementById('niveau_11_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_11_in'));" id="niveau_12">
menu 1.2</li>
</ul>


</ul>

</body>
</html>
0
wAxxx Messages postés 421 Date d'inscription   Statut Membre Dernière intervention   46
 
ajoutes dans chaques propriétés : 
color:votre_code_coleur;


ça te permet de changer la couleur des textes (titres)
0
steve-elipz Messages postés 148 Date d'inscription   Statut Membre Dernière intervention  
 
oui mais cela modifie les autre aussi... si je modifie dans le css niveau 1 ca change tout les autres... fait le test tu verras? ;)
0
steve-elipz Messages postés 148 Date d'inscription   Statut Membre Dernière intervention  
 
helppppppppp
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
probleme sommet
urgent -
Raymond PENTIER -

2 réponses
menu caché
laurent -
ChariduP -

7 réponses