MENU HORIZONTAL AVES SUB-SUBMENU STYLE TRANSPARENT DROPDOWN

PAS de téléchargement pour blog ou site, aprés-vous(COPIER COLLER "HTML CSS C'EST TOUS")  Menu dynamic simple transparent dropdown  , avec border simple et le sub-submenu transparent  avec text bleu light   horizontal avec l'effet mouseover   sur tout le menu facile a modifier via le code CSS ,  HTML MENU dynamic SIMPLE.blggerstep: MENU HORIZONTAL AVES SUB-SUBMENU STYLE TRANSPARENT DROPDOWN COOL!!

What is JavaScript?

JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.

Difference betwen Java & JavaScript?

Java is completely different from JavaScript- the former is a compiled language while the later is a scripting language.

What is DHTML?

DHTML is the embodim

---

ent of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.

• Démo
• HTML CODE
• CSS CODE

• HOME
• PRODUCT INFO
  • 2.1 Features
  • 2.2 Installation
    • 2.2.1Description of Files
    • 2.2How to Setup
  • 2.3 Parameters Info
  • 2.4 Dynamic Functions
  • 2.5 Supported Browsers
    • Firefox
    • Internet Explorer
    • Opera
    • Safari
    • Google Chrome
    • Konqueror
  • CSS3 Info
• SAMPLES
  • Android Template
  • Blocks Template
    • Blue Theme
    • Green Fodder Theme
    • Grey Theme
    • Light Theme
    • Orange Theme
    • Purple Theme
  • Elegant Template
  • Frame Template
  • Fresh Template
  • Mac Template
  • Neon Template
    • Green Theme
    • Liliac Theme
    • Blue Theme
    • Neon Theme
    • Orange Theme
  • New Templates
• DOWNLOAD

HTML CODE

<ul id="menutranspa" class="topmenu"> <li class="topmenu"><a href="#" title="HOME">HOME</a></li> <li class="topmenu"><a href="#" title="PRODUCT INFO"><span>PRODUCT INFO</span></a> <ul> <li><a href="#" title="2.1 Features">2.1 Features</a></li> <li><a href="#" title="2.2 Installation"><span>2.2 Installation</span></a> <ul> <li><a href="#" title="2.2.1Description of Files">2.2.1Description of Files</a></li> <li><a href="#" title="2.2How to Setup">2.2How to Setup</a></li> </ul> </li> <li><a href="#" title="2.3 Parameters Info">2.3 Parameters Info</a></li> <li><a href="#" title="2.4 Dynamic Functions">2.4 Dynamic Functions</a></li> <li><a href="#" title="2.5 Supported Browsers"><span>2.5 Supported Browsers</span></a> <ul> <li><a href="#" title="Firefox">Firefox</a></li> <li><a href="#" title="Internet Explorer">Internet Explorer</a></li> <li><a href="#" title="Opera">Opera</a></li> <li><a href="#" title="Safari">Safari</a></li> <li><a href="#" title="Google Chrome">Google Chrome</a></li> <li><a href="#" title="Konqueror">Konqueror</a></li> </ul> </li> <li><a href="#" title="CSS3 Info">CSS3 Info</a></li> </ul> </li> <li class="topmenu"><a href="#" title="SAMPLES"><span>SAMPLES</span></a> <ul> <li><a href="#" title="Android Template">Android Template</a></li> <li><a href="#" title="Blocks Template"><span>Blocks Template</span></a> <ul> <li><a href="#" title="Blue Theme">Blue Theme</a></li> <li><a href="#" title="Green Fodder Theme">Green Fodder Theme</a></li> <li><a href="#" title="Grey Theme">Grey Theme</a></li> <li><a href="#" title="Light Theme">Light Theme</a></li> <li><a href="#" title="Orange Theme">Orange Theme</a></li> <li><a href="#" title="Purple Theme">Purple Theme</a></li> </ul> </li> <li><a href="#" title="Elegant Template">Elegant Template</a></li> <li><a href="#" title="Frame Template">Frame Template</a></li> <li><a href="#" title="Fresh Template">Fresh Template</a></li> <li><a href="#" title="Mac Template">Mac Template</a></li> <li><a href="#" title="Neon Template"><span>Neon Template</span></a> <ul> <li><a href="#" title="Green Theme">Green Theme</a></li> <li><a href="#" title="Liliac Theme">Liliac Theme</a></li> <li><a href="#" title="Blue Theme">Blue Theme</a></li> <li><a href="#" title="Neon Theme">Neon Theme</a></li> <li><a href="#" title="Orange Theme">Orange Theme</a></li> </ul> </li> <li><a href="#" title="New Templates">New Templates</a></li> </ul> </li> <li class="topmenu"><a href="#" title="DOWNLOAD">DOWNLOAD</a></li> </ul>

CSS OU STYLE CODE

<style> ul#menutranspa,ul#menutranspa ul{ margin:0;list-style:none;padding:0;background-color:;border-width:0;border-style:solid;border-color:;} ul#menutranspa ul{ display:none;position:absolute;left:0;top:100%;padding:20px 0;background-color:#ededed; background-image:-moz-linear-gradient(50% 0%,rgba(0,0,0,0),rgba(0,0,0,0.14));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.14)));border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;} ul#menutranspa li:hover>*{ display:block;} ul#menutranspa li:hover{ position:relative;} ul#menutranspa ul ul{ position:absolute;left:100%;top:0;} ul#menutranspa{ display:block;font-size:0;float:left;} ul#menutranspa li{ display:block;white-space:nowrap;font-size:0;float:left;} ul#menutranspa>li,ul#menutranspa li{ margin:0;} ul#menutranspa a:active, ul#menutranspa a:focus{ outline-style:none;} ul#menutranspa a{ display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Tahoma,sans-serif;color:#464545;text-shadow:#FFF 1px 1px 1px;cursor:default;padding:5px 12px;background-color:;background-repeat:repeat;border-width:0px;border-style:none;border-color:;} ul#menutranspa ul li{ float:none;margin:0;} ul#menutranspa ul a{ text-align:center;padding:7px;background-color:;border-width:1px 0 0 0;border-style:solid;border-color:transparent;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px "Trebuchet MS",Arial,Helvetica,sans-serif;color:#808080;text-decoration:none;} ul#menutranspa li:hover>a{ border-style:none;font:16px Tahoma,sans-serif;color:#0ea9bb;text-decoration:none;text-shadow:#FFF 1px 1px 1px;} ul#menutranspa img{ border:none;vertical-align:middle;margin-right:5px;} ul#menutranspa img.over{ display:none;} ul#menutranspa li:hover > a img.def{ display:none;} ul#menutranspa li:hover > a img.over{ display:inline;} ul#menutranspa span{ display:block;overflow:visible;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsya4kAVQ3quIEDvXcQiLzm2orASZnZheTy5T9ph7_GseYmZjdwu7iXUx35SX71FPq3mhNlz70dA_0opPQrDtCVsHEcIDNhNl_LWSdzHkfxg73vij088LZczF6NcTabwODuYlIZKsbcwvd/s1600/mainbblanc.png");background-position:right center;background-repeat:no-repeat;padding-right:42px;} ul#menutranspa li:hover>a>span{ background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsya4kAVQ3quIEDvXcQiLzm2orASZnZheTy5T9ph7_GseYmZjdwu7iXUx35SX71FPq3mhNlz70dA_0opPQrDtCVsHEcIDNhNl_LWSdzHkfxg73vij088LZczF6NcTabwODuYlIZKsbcwvd/s1600/mainbblanc.png");} ul#menutranspa ul span{ background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzlgTyQGleg4dk4yUxxUEjzniRD3EGkzqz-eFNb4huQQhQLupL55kCI-fPMWWsqqDaQYsLj99qDpnxdNV6WonXVQIp1-bFNZfTWtEe4E770jlTqZVXLiGnecBpuIUYWZ5EvZxfPwnF267e/s1600/arrowsub.png");padding-right:18px;} ul#menutranspa ul li:hover > a span{ background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzlgTyQGleg4dk4yUxxUEjzniRD3EGkzqz-eFNb4huQQhQLupL55kCI-fPMWWsqqDaQYsLj99qDpnxdNV6WonXVQIp1-bFNZfTWtEe4E770jlTqZVXLiGnecBpuIUYWZ5EvZxfPwnF267e/s1600/arrowsub.png");} ul#menutranspa ul li:hover>a{ background-color:#d5d5d5;border-style:solid;border-color:#c0c0c0;font:13px "Trebuchet MS",Arial,Helvetica,sans-serif;color:#414141;text-decoration:none;} ul#menutranspa.topmenu{ border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;} ul#menutranspa li.topmenu>a{ height:20px;line-height:20px;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;} ul#menutranspa li.topmenu:hover>a{ line-height:20px;} </style>