Menu dhtml submenu horizontal simple a modiffier PINKBLANC

PAS de téléchargement pour blog ou site aprés-vous(COPIER COLLER "html et css"C'EST TOUS) un Menu horizontal avec l'effet mouseover facile a modifier via le code CSS avec un submenu et un sub-submenu normal DHTML MENU dynamic SIMPLE. COOL!!

• Démo
• HTML CODE
• CSS CODE

• 
• page- 1
  • page 1. 0 texte grand résultat submenu grand
  • page 1.1 text grand résultat submenu grand
  • page 1 2 texte grand résultat submenu grand
• page-2
  • page-2 0
    • page-2 0 0
      • page-2 0 0 0
      • page-2 0 0 1
      • page-2 0 0 2
      • page-2 0 0 3
      • page-2 0 0 4
    • page-2 0 1
      • page-2 0 1 0
      • page-2 0 1 1
      • page-2 0 1 2
    • page-2 0 2
      • page-2 0 2 0
      • page-2 0 2 1
      • page-2 0 2 2
  • page-2 1
    • page-2 1 0
    • page-2 1 1
    • page-2 1 2
  • page-2 2
    • page-2 2 0
    • page-2 2 1
    • page-2 2 2
• page- 3
  • Item 3 0
• page-4

<ul id="MHpinkblanc" class="topmenu"> <li class="topfirst"><a href="#" title="home" style="width:74px;height:24px;line-height:24px;"><img src="menuV.PINKBLANC_files/css3menu1/micon1_3.png" alt="home"/>home</a></li> <li><a href="#" title="page- 1" style="width:83px;height:24px;line-height:24px;"><span>page- 1</span></a> <ul> <li><a href="#" title="page 1. 0 texte grand résultat submenu grand">page 1. 0 texte grand résultat submenu grand</a></li> <li><a href="#" title="page 1.1 texte grand résultat submenu grand">page 1.1 texte grand résultat submenu grand</a></li> <li><a href="#" title="page 1 2 texte grand résultat submenu grand">page 1 2 texte grand résultat submenu grand</a></li> </ul> </li> <li><a href="#" title="page-2 " style="width:76px;height:24px;line-height:24px;"><span>page-2 </span></a> <ul> <li><a href="#" title="page-2 0"><span>page-2 0</span></a> <ul> <li><a href="#" title="page-2 0 0"><span>page-2 0 0</span></a> <ul> <li><a href="#" title="page-2 0 0 0">page-2 0 0 0</a></li> <li><a href="#" title="page-2 0 0 1">page-2 0 0 1</a></li> <li><a href="#" title="page-2 0 0 2">page-2 0 0 2</a></li> <li><a href="#" title="page-2 0 0 3">page-2 0 0 3</a></li> <li><a href="#" title="page-2 0 0 4">page-2 0 0 4</a></li> </ul> </li> <li><a href="#" title="page-2 0 1"><span>page-2 0 1</span></a> <ul> <li><a href="#" title="page-2 0 1 0">page-2 0 1 0</a></li> <li><a href="#" title="page-2 0 1 1">page-2 0 1 1</a></li> <li><a href="#" title="page-2 0 1 2">page-2 0 1 2</a></li> </ul> </li> <li><a href="#" title="page-2 0 2"><span>page-2 0 2</span></a> <ul> <li><a href="#" title="page-2 0 2 0">page-2 0 2 0</a></li> <li><a href="#" title="page-2 0 2 1">page-2 0 2 1</a></li> <li><a href="#" title="page-2 0 2 2">page-2 0 2 2</a></li> </ul> </li> </ul> </li> <li><a href="#" title="page-2 1"><span>page-2 1</span></a> <ul> <li><a href="#" title="page-2 1 0">page-2 1 0</a></li> <li><a href="#" title="page-2 1 1">page-2 1 1</a></li> <li><a href="#" title="page-2 1 2">page-2 1 2</a></li> </ul> </li> <li><a href="#" title="page-2 2"><span>page-2 2</span></a> <ul> <li><a href="#" title="page-2 2 0">page-2 2 0</a></li> <li><a href="#" title="page-2 2 1">page-2 2 1</a></li> <li><a href="#" title="page-2 2 2">page-2 2 2</a></li> </ul> </li> </ul> </li> <li><a href="#" title="page- 3" style="width:83px;height:24px;line-height:24px;"><span>page- 3</span></a> <ul> <li><a href="#" title="Item 3 0">Item 3 0</a></li> </ul> </li> <li class="toplast"><a href="#" title="page-4" style="width:77px;height:24px;line-height:24px;">page-4</a></li> </ul>

<style> ul#MHpinkblanc,ul#MHpinkblanc ul{ margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;} ul#MHpinkblanc ul{ display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#ffffff;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;} ul#MHpinkblanc li:hover>*{ display:block;} ul#MHpinkblanc li:hover{ position:relative;} ul#MHpinkblanc ul ul{ position:absolute;left:100%;top:0;} ul#MHpinkblanc{ display:block;font-size:0;float:left;} ul#MHpinkblanc li{ display:block;white-space:nowrap;font-size:0;float:left;} ul#MHpinkblanc>li,ul#MHpinkblanc li{ margin:0;} ul#MHpinkblanc a:active, ul#MHpinkblanc a:focus{ outline-style:none;} ul#MHpinkblanc a,ul#MHpinkblanc a.pressed{ display:block;vertical-align:middle;text-align:right;text-decoration:none;font:bold 20px Times New Roman;color:#000000;text-shadow:#FFF 0 0 1px;cursor:pointer;} ul#MHpinkblanc ul li{ float:none;margin:10px 0 0;} ul#MHpinkblanc ul a{ text-align:center;padding:4px;background-color:#ffffff;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:bold 18px Times New Roman;color:#000000;text-decoration:underline;} ul#MHpinkblanc li:hover>a{ background-color:#ffffff;border-color:#C0C0C0;border-style:solid;font:bold 20px Times New Roman;color:#000000;text-decoration:underline;text-shadow:#FFF 0 0 1px;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Gdm8n187QwfWWxiCioVb_4-BTIAn80hmVq5qKqAgAlx1mZ5c0YhtuiFeA3FTb98upImIn1j2N8SnYIZiHXaGk8VcOKhcA2vmACPMt0gmG7lVwW-AwjTUKPhbM-V3ZIZAxeZY-nn07AdI/s1600/mainbblanc.png");background-position:0 100px;} ul#MHpinkblanc img{ border:none;vertical-align:middle;margin-right:10px;} ul#MHpinkblanc img.over{ display:none;} ul#MHpinkblanc li:hover > a img.def{ display:none;} ul#MHpinkblanc li:hover > a img.over{ display:inline;} ul#MHpinkblanc li a.pressed img.over{ display:inline;} ul#MHpinkblanc li a.pressed img.def{ display:none;} ul#MHpinkblanc span{ display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;} ul#MHpinkblanc ul span{ background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6wWcLR-kb-JAiz20K3pQ5Ag9Fw42beXTiE3dAtekCFpSwWcVZ7bFmtkK06Y3bdlHKVIWJi8Kh6F_7qhGtnkXZWuZeq78-aElbG8HyMGVry13823uVx7Fkh2RXo86bfaLpuwcvatJn8Z9J/s1600/arrow.gif");padding-right:28px;} ul#MHpinkblanc a{ padding:10px;background-color:#ffaaff;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKJ4PhfEKUWj21iMzaz4qFEvAe1JB-vrYkmAEF83jFzIDHC6-9EFuMes-rbDj50P9miJ8HIEI4febjWe1Z6CpEbWkf8YhoKpPsv3cmA7Q-bCxClT1VngGYxFbzsEq9Vo18Q4gLusKQvtOn/s1600/mainbblanc.png");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;color:#000000;text-decoration:none;text-shadow:#FFF 0 0 1px;} ul#MHpinkblanc li:hover>a,ul#MHpinkblanc li>a.pressed{ background-color:#ffffff;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKJ4PhfEKUWj21iMzaz4qFEvAe1JB-vrYkmAEF83jFzIDHC6-9EFuMes-rbDj50P9miJ8HIEI4febjWe1Z6CpEbWkf8YhoKpPsv3cmA7Q-bCxClT1VngGYxFbzsEq9Vo18Q4gLusKQvtOn/s1600/mainbblanc.png");background-position:0 100px;border-style:solid;border-color:#C0C0C0;color:#000000;text-decoration:underline;text-shadow:#FFF 0 0 1px;} ul#MHpinkblanc ul li:hover>a,ul#MHpinkblanc ul li>a.pressed{ background-color:#ffffff;background-image:none;font:bold 18px Times New Roman;color:#868686;text-decoration:none;} ul#MHpinkblanc li.topfirst>a{ border-radius:10px 0 0 10px;-moz-border-radius:10px 0 0 10px;-webkit-border-radius:10px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;} ul#MHpinkblanc li.toplast>a{ border-radius:0 10px 10px 0;-moz-border-radius:0 10px 10px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:10px;-webkit-border-bottom-right-radius:10px;} </style>