Menu deroulant overmouse avec cadre

steve-elipz Messages postés 171 Statut Membre -  
steve-elipz Messages postés 171 Statut Membre -
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

3 réponses

  1.
    wAxxx Messages postés 455 Statut Membre 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
  2. steve-elipz Messages postés 171 Statut Membre
     
    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
    1. wAxxx Messages postés 455 Statut Membre 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
    2. steve-elipz Messages postés 171 Statut Membre
       
      ie... lol
      0
  3. steve-elipz Messages postés 171 Statut Membre
     
    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
    1. wAxxx Messages postés 455 Statut Membre 46
       
      ajoutes dans chaques propriétés : 
      color:votre_code_coleur;


      ça te permet de changer la couleur des textes (titres)
      0
    2. steve-elipz Messages postés 171 Statut Membre
       
      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
    3. steve-elipz Messages postés 171 Statut Membre
       
      helppppppppp
      0

Discussions similaires

Comment faire afin d'accéder au boot menu ou BIOS sous MSI ?
Kaheil -
Ismo87 -

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Cadre photo numérique en panne
ED87 -
cleme33760 -

9 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses