blggerstep: MENU horizontal simple multicolonnes Modèle NOIR,GRIS PLUS ICON

Démo
HTML CODE
CSS CODE

<li class="topmenu"><a href="#" title="DOWNLOAD">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsyzgrApSKw-YjLSBnJfvJ4MaqIco5YLTk93OruQWyRj_417EPW5dB_3i7CTD8dZL5J6u8JLmO4n2rqrnt82lmERhr4DJ8PE5yYi_hoApita299zMSravAsKtSVGmDWXKKa-asQulXGgh2/s1600/blue-home.png" alt="DOWNLOAD"/>DOWNLOAD</a>
 </li>

<li class="toproot"><a href="#" title="PRODUCT INFO"><span>
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbEyIVapsqudky0VgjombZCyik-zu5tSPqcee0vTFA4FyNFBSk_Pn62RDaMwHeJNyAN6GeGTDWkKsXxofRTTFJmTsD3AaE2zBq4fUDvSlgLOyikxnrXbfHKZJo7XfsiYWBwmf7EPE-SWsU/s1600/blue-info.png" alt="PRODUCT INFO"/>PRODUCT INFO</span></a>

<li><a href="#" title="2.1 Features"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-0vxMM9SK1LirP5vAzO81oPVcmmXgkDQT0KyTWxhpMmunBZSVgq2Y7SWMHWj6FEOXTYKtAHBoiAkGugIeAfpgkbVq4qY0hjG7_IJhWOPrqCHHhNqlMliF7A7Body7zi-1FVzx4lnmA11/s1600/blue-fbook.png" alt="2.1 Features"/>2.1 Features</a></li>

<li><a href="#" title="2.2 Installation"><IMG alt="2.2 Installation" 
    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMM6sAXmFsb08ouPcerxhfBrk0iwEC9TtvJC7cdCUTF5TVHV4kQjJdh2qWxmU-m7LHe5mmHwKAOLsaZ2JWtQJ7nUroDVUy2omQ58TgryjjSRodyh3scZUy0zBLfvM3DXDrkkWwdhX_dVWW/s1600/blue-tool2.png">2.2 Installation</a></li>
  <li><a href="#" title="2.3 Parameters  Info"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilc_jMavY_D9YmSEYjrZS9CFMv0tseq12MrHv-6_nZV3wd6J3JqAt0lQjDTLKlTsJRl0x0uSmmtcJA3Z6q0-_dRuf8EIpltgVQ6AyPaxB0E7SW8jpt9ltoJf08oT2pKMCValufUoRK-qfL/s1600/blue-gear.png" alt="2.3 Parameters  Info"/>2.3 Parameters  Info</a></li>

</ul></div>

<li><a href="#" title="2.4 Dynamic Functions"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG8iaaYQ56SwmnRKdzLoRaQTxbqWS44LyVvpbrs1hrqIvK0O8bvgIbCvk-XozcCr86JR-8CjPoAEkltCOhTmSBllOh2qn-1Q8BchNFlFE4_-HgidLY4qNzKg7tXPL4axoCKr3Rsobbli0b/s1600/blue-graph.png" alt="2.4 Dynamic Functions"/>2.4 Dynamic Functions</a></li>

<li><a href="#" title="2.5 Supported Browsers"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggj5SQ9yrB6LqE3eFnKvn3EM94c_09cJJYuerOFEH_PLMUI6c8qWKUl0LZQ8lYrp39ZOFw_guz9l8Bn4Fcul0PrwANgv_Zzt-zU_HSt_43gSxGBCjwO5YMnK8DLfckd0Sc8hUr9KZRKR1E/s1600/blue-globe.png" alt="2.5 Supported Browsers"/>2.5 Supported Browsers</span></a>

<li><a href="#" title="Firefox"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8P69bVSvAdQmH_pGwYmh7Hwnr0nv_gA4MawUV28msmbyqOhHaQT2jrfN64ZomV51-PZtczaKi99CvV6QaPxzcyZl7dpfA5csSAIxurE7rhVj5PVNubgIYL2liQq3PPk-5K4variwJk8pY/s1600/blue-dots+up.png" alt="Firefox"/>Firefox</a></li>

<li><a href="#" title="Internet Explorer"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8P69bVSvAdQmH_pGwYmh7Hwnr0nv_gA4MawUV28msmbyqOhHaQT2jrfN64ZomV51-PZtczaKi99CvV6QaPxzcyZl7dpfA5csSAIxurE7rhVj5PVNubgIYL2liQq3PPk-5K4variwJk8pY/s1600/blue-dots+up.png" alt="Internet Explorer"/>Internet Explorer</a></li>

<li><a href="#" title="Opera"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8P69bVSvAdQmH_pGwYmh7Hwnr0nv_gA4MawUV28msmbyqOhHaQT2jrfN64ZomV51-PZtczaKi99CvV6QaPxzcyZl7dpfA5csSAIxurE7rhVj5PVNubgIYL2liQq3PPk-5K4variwJk8pY/s1600/blue-dots+up.png" alt="Opera"/>Opera</a></li>

</ul></div>

<li><a href="#" title="Safari"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQY21JptnlfqlCQLUbZXlJIm7JxEzyktmnYEVKG6rsXXvkM2VW8gzyb0WjlsNNAcrsK1RxI7tzfBDxDGL-GFv3EKdNFfBFd8od9KCwZ9abm-wqF4DepCvxRDMRyox3auoswYiTykpGEX02/s1600/blue-dots+up2.png" alt="Safari"/>Safari</a></li>

<li><a href="#" title="Google Chrome"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQY21JptnlfqlCQLUbZXlJIm7JxEzyktmnYEVKG6rsXXvkM2VW8gzyb0WjlsNNAcrsK1RxI7tzfBDxDGL-GFv3EKdNFfBFd8od9KCwZ9abm-wqF4DepCvxRDMRyox3auoswYiTykpGEX02/s1600/blue-dots+up2.png" alt="Google Chrome"/>Google Chrome</a></li>

<li><a href="#" title="Konqueror"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQY21JptnlfqlCQLUbZXlJIm7JxEzyktmnYEVKG6rsXXvkM2VW8gzyb0WjlsNNAcrsK1RxI7tzfBDxDGL-GFv3EKdNFfBFd8od9KCwZ9abm-wqF4DepCvxRDMRyox3auoswYiTykpGEX02/s1600/blue-dots+up2.png" alt="Konqueror"/>Konqueror</a></li>

</ul></div></div>

</li>

</ul></div></div>

</li>

<li class="toproot"><a href="#" title="SAMPLES"><span>
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uG9LhOqviJmBI4VMgn4_tbLKWg0EDUMdNv4EhRh7g3FEndi2Qxgg4Gry0LYmTvytzL8O0bHYVD1iSQswDRqvuVRaRo3qF-5GnNpaclin6aVul3vhnYEFWEF7SckeCNppKoEp_H9rA9Cm/s1600/blue-star.png" alt="SAMPLES"/>SAMPLES</span></a>

<li><a href="#" title="Android Template"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigHORmwND-H1fwyoM7Q5ldEwwKHQDiyqs7sjiN75BgwTjZ0vWHJv5vhWzNjxJhkISbQHvvjT8RhNYWkqRotUaAf-Cv1YDRlZdWXtnRoDMzn5gj3XCRfjjh4dGZSusm3BdNlfrpUpsn_RsQ/s1600/blue-card4.png" alt="Android Template"/>Android Template</a></li>

<li><a href="#" title="Blocks Template"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigHORmwND-H1fwyoM7Q5ldEwwKHQDiyqs7sjiN75BgwTjZ0vWHJv5vhWzNjxJhkISbQHvvjT8RhNYWkqRotUaAf-Cv1YDRlZdWXtnRoDMzn5gj3XCRfjjh4dGZSusm3BdNlfrpUpsn_RsQ/s1600/blue-card4.png" alt="Blocks Template"/>Blocks Template</span></a>
  </li>
 <li><a href="#" title="Elegant Template"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigHORmwND-H1fwyoM7Q5ldEwwKHQDiyqs7sjiN75BgwTjZ0vWHJv5vhWzNjxJhkISbQHvvjT8RhNYWkqRotUaAf-Cv1YDRlZdWXtnRoDMzn5gj3XCRfjjh4dGZSusm3BdNlfrpUpsn_RsQ/s1600/blue-card4.png" alt="Elegant Template"/>Elegant Template</a></li>

</ul></div>

<li><a href="#" title="Frame  Template"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigHORmwND-H1fwyoM7Q5ldEwwKHQDiyqs7sjiN75BgwTjZ0vWHJv5vhWzNjxJhkISbQHvvjT8RhNYWkqRotUaAf-Cv1YDRlZdWXtnRoDMzn5gj3XCRfjjh4dGZSusm3BdNlfrpUpsn_RsQ/s1600/blue-card4.png" alt="Frame  Template"/>Frame  Template</a></li>

<li><a href="#" title="Fresh Template"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigHORmwND-H1fwyoM7Q5ldEwwKHQDiyqs7sjiN75BgwTjZ0vWHJv5vhWzNjxJhkISbQHvvjT8RhNYWkqRotUaAf-Cv1YDRlZdWXtnRoDMzn5gj3XCRfjjh4dGZSusm3BdNlfrpUpsn_RsQ/s1600/blue-card4.png" alt="Fresh Template"/>Fresh Template</a></li>

<li><a href="#" title="Mac Template"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigHORmwND-H1fwyoM7Q5ldEwwKHQDiyqs7sjiN75BgwTjZ0vWHJv5vhWzNjxJhkISbQHvvjT8RhNYWkqRotUaAf-Cv1YDRlZdWXtnRoDMzn5gj3XCRfjjh4dGZSusm3BdNlfrpUpsn_RsQ/s1600/blue-card4.png" alt="Mac Template"/>Mac Template</a></li>

</ul></div>

<li><a href="#" title="Neon Template"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigHORmwND-H1fwyoM7Q5ldEwwKHQDiyqs7sjiN75BgwTjZ0vWHJv5vhWzNjxJhkISbQHvvjT8RhNYWkqRotUaAf-Cv1YDRlZdWXtnRoDMzn5gj3XCRfjjh4dGZSusm3BdNlfrpUpsn_RsQ/s1600/blue-card4.png" alt="Neon Template"/>Neon Template</a>

</li>

<li><a href="#" title="New Templates"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvvAMurqyhl9NMWiITzf6cz6LSTQP5sAdzLKTidT8_NWsecaN1xIiVZU7uM01MDDDHRnZwWe5QB9hmmoPJYcJxDySfg6uMjFZmPv5nEzbc9RZ5WT0VvBosnjC6ureC4tpPqofwvDemRsGX/s1600/blue-card45.png" alt="New Templates"/>New Templates</a></li>

</ul></div></div>

</li>

<li class="topmenu"><a href="#" title="DOWNLOAD"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9rO_mKQzEzAEA6iKapgCGJ5OSR2olbjXNP-mBU4aEJKkHk8JdJbEOHxUvpVgDyKL92FV56G1X_jt9hf-MZNZl3kLYCPcp80cq-KcA7iLMpnXwF211JPNtk2ccLHBxo6Mqxy_E1Ja4k2mX/s1600/blue-ok.png" alt="DOWNLOAD"/>DOWNLOAD</a></li>

</ul>

UL#menucol_top {
 BORDER-BOTTOM: #5f5f5f 1px solid; BORDER-LEFT: #5f5f5f 1px solid; PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #dedede; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: #5f5f5f 1px solid; BORDER-RIGHT: #5f5f5f 1px solid; PADDING-TOP: 0px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px
}
UL#menucol_top UL {
 BORDER-BOTTOM: #5f5f5f 1px solid; BORDER-LEFT: #5f5f5f 1px solid; PADDING-BOTTOM: 0px; BACKGROUND-COLOR: #dedede; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: #5f5f5f 1px solid; BORDER-RIGHT: #5f5f5f 1px solid; PADDING-TOP: 0px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px
}
UL#menucol {
 PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
UL#menucol UL {
 PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
UL#menucol {
 BORDER-BOTTOM: 0px solid; BORDER-LEFT: 0px solid; BACKGROUND-COLOR: #c0c3c5; BORDER-TOP: 0px solid; BORDER-RIGHT: 0px solid
}
UL#menucol .submenu {
 BORDER-BOTTOM: 0px solid; BORDER-LEFT: 0px solid; BACKGROUND-COLOR: #c0c3c5; BORDER-TOP: 0px solid; BORDER-RIGHT: 0px solid
}
UL#menucol .submenu {
 BORDER-BOTTOM: #4b4f51 9px solid; POSITION: absolute; BORDER-LEFT: #4b4f51 9px solid; BACKGROUND-COLOR: #4b4f51; DISPLAY: none; FLOAT: left; BORDER-TOP: #4b4f51 9px solid; BORDER-RIGHT: #4b4f51 9px solid; TOP: 80%; LEFT: 0px; -moz-border-radius: 0 11px 11px 11px; -webkit-border-radius: 0; border-radius: 0 11px 11px 11px; -webkit-border-top-right-radius: 11px; -webkit-border-bottom-right-radius: 11px; -webkit-border-bottom-left-radius: 11px
}
UL#menucol LI:hover > * {
 DISPLAY: block
}
UL#menucol LI:hover {
 POSITION: relative
}
UL#menucol UL .submenu {
 POSITION: absolute; TOP: -6px; LEFT: 100%; -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px
}
UL#menucol {
 DISPLAY: block; FLOAT: left; FONT-SIZE: 0px
}
UL#menucol UL {
 PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
UL#menucol .column {
 FLOAT: left
}
UL#menucol LI {
 DISPLAY: block; WHITE-SPACE: nowrap; FLOAT: left; FONT-SIZE: 0px
}
UL#menucol > LI {
 MARGIN: 0px
}
UL#menucol LI {
 MARGIN: 0px
}
UL#menucol A:active {
 OUTLINE-STYLE: none
}
UL#menucol A:focus {
 OUTLINE-STYLE: none
}
UL#menucol A {
 BORDER-BOTTOM: 0px; TEXT-ALIGN: left; BORDER-LEFT: 0px; PADDING-BOTTOM: 12px; BACKGROUND-COLOR: #c0c3c5; PADDING-LEFT: 15px; PADDING-RIGHT: 15px; DISPLAY: block; BACKGROUND-REPEAT: repeat; FONT: 11px Arial,Helvetica,sans-serif; COLOR: #2e3132; VERTICAL-ALIGN: middle; BORDER-TOP: 0px; CURSOR: pointer; BORDER-RIGHT: 0px; TEXT-DECORATION: none; PADDING-TOP: 12px
}
UL#menucol UL LI {
 FLOAT: none
}
UL#menucol UL A {
 BORDER-BOTTOM: #3d3d3d 1px solid; TEXT-ALIGN: left; BORDER-LEFT: #4b4f51 1px solid; PADDING-BOTTOM: 4px; BACKGROUND-COLOR: #4b4f51; PADDING-LEFT: 8px; PADDING-RIGHT: 8px; FONT: 11px Arial,Helvetica,sans-serif; COLOR: #ffffff; BORDER-TOP: #888888 1px solid; BORDER-RIGHT: #4b4f51 1px solid; TEXT-DECORATION: none; PADDING-TOP: 4px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px
}
UL#menucol LI:hover > A {
 BORDER-BOTTOM-STYLE: none; BACKGROUND-COLOR: #4b4f51; BORDER-LEFT-STYLE: none; FONT: 11px Arial,Helvetica,sans-serif; BORDER-TOP-STYLE: none; COLOR: #ffffff; BORDER-RIGHT-STYLE: none; TEXT-DECORATION: none
}
UL#menucol IMG {
 BORDER-BOTTOM-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; VERTICAL-ALIGN: middle; MARGIN-RIGHT: 12px
}
UL#menucol IMG.over {
 DISPLAY: none
}
UL#menucol LI:hover > A IMG.def {
 DISPLAY: none
}
UL#menucol LI:hover > A IMG.over {
 DISPLAY: inline
}
UL#menucol SPAN {
 PADDING-RIGHT: 0px; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: right center; OVERFLOW: visible
}
UL#menucol UL SPAN {
 BACKGROUND-IMAGE: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUiZ7VluSiwRVAKEoheo5xRULDvCcJMbrh4DGGzUu9RuQZn8Foot6GSzJhpBQ96RkJxpB6BiAVeYvCKJBQk2Osk7G92l0xg_bkGtVx1-UERN564rZtaCszCxG5wei1NHAz8-SAZd0JBv9R/s1600/arrowsub.png); PADDING-RIGHT: 2px
}
UL#menucol UL LI:hover > A SPAN {
 BACKGROUND-IMAGE: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUiZ7VluSiwRVAKEoheo5xRULDvCcJMbrh4DGGzUu9RuQZn8Foot6GSzJhpBQ96RkJxpB6BiAVeYvCKJBQk2Osk7G92l0xg_bkGtVx1-UERN564rZtaCszCxG5wei1NHAz8-SAZd0JBv9R/s1600/arrowsub.png)
}
UL#menucol UL LI:hover > A {
 BORDER-BOTTOM-STYLE: solid; BORDER-BOTTOM-COLOR: #d3d5d5; BACKGROUND-COLOR: #c0c3c5; BORDER-TOP-COLOR: #53595c; BORDER-LEFT-STYLE: solid; FONT: 11px Arial,Helvetica,sans-serif; BORDER-TOP-STYLE: solid; COLOR: #2e3132; BORDER-RIGHT-COLOR: #4b4f51; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-COLOR: #c0c3c5; TEXT-DECORATION: none
}
UL.topmenu#menucol > LI {
 MARGIN: 0px 0px 0px 5px
}
UL.topmenu#menucol {
 PADDING-BOTTOM: 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 5px; PADDING-TOP: 5px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px
}
UL#menucol LI.topmenu > A {
 LINE-HEIGHT: 26px; HEIGHT: 26px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px
}
UL#menucol LI.topmenu:hover > A {
 LINE-HEIGHT: 26px
}
UL#menucol LI.toproot > A {
 LINE-HEIGHT: 26px; HEIGHT: 26px; -moz-border-radius: 9px 9px 0 0; -webkit-border-radius: 9px; border-radius: 9px 9px 0 0; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0
}
UL#menucol LI.toproot:hover > A {
 LINE-HEIGHT: 26px; BACKGROUND-COLOR: #4b4f51
}
</STYLE>

clicker sur menu

Rechercher dans ce blog