MEGA MENU WITH COLOR HOVER BUTTONS IN SUBMENUS
.
.
.
.
.
<style>
.button{font:13px Arial;text-decoration:none !important;white-space:nowrap;display:inline-block;vertical-align:baseline;position:relative;cursor:pointer;
padding:6px 8px;background-clip:border-box;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;webkit-transition:background-position 1s;
-moz-transition:background-position 1s;transition:background-position 1s;}
.button:hover{background-position:top left;background-position:top left, bottom right, 0 0, 0 0;}
.button:active{bottom:-1px;}
.button.px16 {font-size:16px;}
.button.px15 {font-size:15px;}
.button.px14 {font-size:14px;}
.button.px13 {font-size:13px;}
.button.px12 {font-size:12px;}
.button.px11 {font-size:11px;}
.button.px10 {font-size:10px;}
.button.rounded{-moz-border-radius:4em;-webkit-border-radius:4em;border-radius:4em;}
.c0.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #33FFFF !important;background-color: #173374;margin-bottom:3px;}
.c0.button:hover{position:relative;float:left;color:#FFFFFF; background-color:#115599;}
.c1.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #33FFFF !important;background-color: #115599;margin-bottom:3px;}
.c1.button:hover{position:relative;float:left;color:#FFFFFF; background-color:#173374;margin-bottom:3px;}
.c2.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #FBBB22 !important;background-color:#105105;margin-bottom:3px;}
.c2.button:hover{position:relative;float:left;color:#FFFFFF;background-color:#207907;}
.c3.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #FBBB22 !important;background-color: #990000;margin-bottom:3px;}
.c3.button:hover{position:relative;float:left;color:#FFFFFF;background-color:#FF1111;}
.c4.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #FBBB22 !important;background-color: #333333;margin-bottom:3px;}
.c4.button:hover{position:relative;float:left;color:#FFFFFF;background-color:#000000;}
.c5.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #FBBB22 !important;background-color: #740777;margin-bottom:3px;}
.c5.button:hover{position:relative;float:left;color:#FFFFFF; background-color:#A90C94;}
.c6.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #FFFF00 !important;background-color:#52280E;margin-bottom:3px;}
.c6.button:hover{position:relative;float:left;color:#FFFFFF;background-color:#803503;}
.c7.button{position:relative;float:left;color:#000000 !important;border:1px solid #000000 !important;background-color: #33FFFF;margin-bottom:3px;}
.c7.button:hover{position:relative;float:left;color:#000000;background-color:#05A2AA;}
.c8.button{position:relative;float:left;color:#000000 !important;border:1px solid #000000 !important;background-color: #03C039;margin-bottom:3px;}
.c8.button:hover{position:relative;float:left;color:#000000;background-color:#4EFF44;}
.c9.button{position:relative;float:left;color:#000000 !important;border:1px solid #000000 !important;background-color: #FFFF00;margin-bottom:3px;}
.c9.button:hover{position:relative;float:left;color:#000000;background-color:#FFBB22;}
.c10.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #FBBB22 !important;background-color: #364151;margin-bottom:3px;}
.c10.button:hover{position:relative;float:left;background-color:#263652;color:#FFFFFF;}
.c11.button{position:relative;float:left;color:#000000 !important;border:1px solid #000000 !important;background-color: #EAB1E9;margin-bottom:3px;}
.c11.button:hover{position:relative;float:left;color:#000000;background-color:#FCD7FC;}
.c12.button{position:relative;float:left;color:#000000 !important;border:1px solid #000000 !important;background-color: #DEA657;margin-bottom:3px;}
.c12.button:hover{position:relative;float:left;color:#000000;background-color:#FF6600;}
.c13.button{position:relative;float:left;color:#661111 !important;border:1px solid #000000 !important;background-color: #FBF5F5;margin-bottom:3px;}
.c13.button:hover{position:relative;float:left;color:#661111;background-color:#FFFFFF;}
.c14.button{position:relative;float:left;color:#FFFFFF !important;border:1px solid #000000 !important;background-color: #FF6600;margin-bottom:3px;}
.c14.button:hover{position:relative;float:left;color:#000000;background-color:#885000;}
</style>
<style>
#f-box #f-box-wrap {display:none;z-index:99;padding:0px}
#f-box:hover #f-box-wrap {display:block}
#f-box:hover #f-box-wrap {position:absolute;top:37px;z-index:999;ul list-style:none;}
</style>
<script>
hover = function() {
if (!document.body.currentStyle) return;
var DIVf-box = document.getElementById('f-box');
var DIVf-box_wrap = document.getElementById('f-box-wrap');
DIVf-box.onmouseover = function() {
DIVf-box_wrap.style.display = 'block';}
DIVf-box.onmouseout = function() {
DIVf-box_wrap.style.display = 'none';}}
window.onload = hover;
</script>
<div id="f-box">
<a href="https://the-best-widgets.blogspot.com/" class="button c9 px14">HOME</a>
</div>
<div id="f-box">
<a href="#" class="button c2 px14">MY POSTS</a>
<div id="f-box-wrap">
<div style="position:relative;float:left;top:-8px;left:58px;background:#173374; border:1px solid #33FFFF;border-radius:8px; height:auto; width:230px;overflow:auto; padding:5px;">
<a href="https://the-best-widgets.blogspot.com/p/my-posts.html" class="button c8 px12">Όλα τα άρθρα (2 στήλες μόνο τίτλοι)</a>
<a href="https://the-best-widgets.blogspot.com/p/my-posts_19.html" class="button c7 px12">Όλα τα άρθρα (3 στήλες μόνο τίτλοι)</a>
<a href="https://the-best-widgets.blogspot.com/p/widgets_3619.html" class="button c14 px12">Όλα τα άρθρα 21 καρτέλες μόνο τίτλοι</a>
<a href="https://the-best-widgets.blogspot.com/p/my-forum.html" class="button c9 px12">Όλα τα άρθρα 21 carousel sliders</a>
</div></div></div>
<div id="f-box">
<a href="#" class="button c14 px14">MY LABELS</a>
<div id="f-box-wrap">
<div style="position:relative;float:left;top:-8px;left:152px;background:#173374; border:1px solid #33FFFF;border-radius:8px; height:auto; width:248px;overflow:auto; padding:5px;">
<a href="https://the-best-widgets.blogspot.gr/search/label/ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ?max-results=32" class="button c2 px12">Menu (35)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/GALLERIES" class="button c1 px12">Video & photo galleries (12)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/TEXT BOXES" class="button c6 px12">Text boxes 14</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/ΜΟΡΦΟΠΟΙΗΣΗ BLOG?max-results=32" class="button c5 px12">Μορφοποίηση blog (32)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/SEO" class="button c10 px12">Seo (7)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/ΤΑΞΙΝΟΜΗΣΗ ΑΝΑΡΤΗΣΕΩΝ" class="button c3 px12">Ταξινόμηση αναρτήσεων (16)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/BACKGROUNDS" class="button c8 px12">Backgrounds (17)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/ΕΝΣΩΜΑΤΩΣΗ ΑΡΧΕΙΩΝ" class="button c12 px12">Ενσωματώσεις (14)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/WIDGETS ΓΙΑ BLOGS?max-results=32" class="button c10 px12">Αλλα widgets (16)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/ΑΣΦΑΛΕΙΑ BLOG" class="button c4 px12">Ασφάλεια blog (6)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/FACEBOOK WIDGETS" class="button c1 px12">Facebook (10)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/SOSIAL BUTTONS?max-results=32" class="button c7 px12">Buttons & windows (22)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/IMAGE EFFECTS" class="button c11 px12">Image effects (18)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/ΣΧΟΛΙΑ BLOGGER" class="button c14 px12">Σχόλια blogger (9)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/ON LINE TOOLS" class="button c3 px12">On line tools (16)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/SLIDESHOWS?max-results=32" class="button c9 px12">Slideshows (38)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/ΚΥΛΙΟΜΕΝΑ LINKS TEXT IMAGES" class="button c5 px12">Κυλιόμενα links, texts & images (12)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/POST SLIDER?max-results=32" class="button c12 px12">Post sliders (6)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/CHRISTMAS WIDGETS" class="button c8 px12">Christmas gadgets (10)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/CLOCKS AND CALENDARS" class="button c1 px12">Clocks & calendars (7)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/COUNTERS" class="button c7 px12">Counters (7)</a></div></div></div>
<div id="f-box">
<a href="#" class="button c3 px14">MY LINKS</a>
<div id="f-box-wrap">
<div style="position:relative;float:left;top:-8px;left:250px;background:#173374; border:1px solid #33FFFF;border-radius:8px; height:auto; width:205px;overflow:auto; padding:5px;">
<a href="https://the-best-widgets.blogspot.com/p/blog-page_11.html" class="button c8 px12">My links-1</a>
<a href="https://the-best-widgets.blogspot.com/p/ranks.html" class="button c7 px12">My links-2</a>
<a href="https://my-posts-1.blogspot.com" class="button c14 px12">My demo blog</a>
<a href="https://the-best-widgets.blogspot.com/p/friendly-blogs.html" class="button c9 px12">My friendly blogs</a>
<a href="https://the-best-widgets.blogspot.com/p/blog-page_3.html" class="button c11 px12">Blogger tools with bookmarks</a>
<a href="https://the-best-widgets.blogspot.com/p/wigdets_31.html" class="button c12 px12">Html-css-js codes with bookmarks</a>
</div></div></div>
<div id="f-box">
<a href="#" class="button c1 px14">MY PHOTOS</a>
<div id="f-box-wrap">
<div style="position:relative;float:left;top:-8px;left:328px;background:#173374; border:1px solid #33FFFF;border-radius:8px; height:auto; width:125px;overflow:auto; padding:5px;">
<a href="https://the-best-widgets.blogspot.com/p/photo-gallery-1.html" class="button c8 px12">Photo galley-1</a>
<a href="https://the-best-widgets.blogspot.com/p/my-posts_19.html" class="button c7 px12">Photo gallery-2</a>
<a href="https://the-best-widgets.blogspot.com/p/widgets_3619.html" class="button c14 px12">Photo gallery-3</a>
</div></div></div>
<div id="f-box">
<a href="#" class="button c5 px14">MY VIDEOS</a>
<div id="f-box-wrap">
<div style="position:relative;float:left;top:-8px;left:432px;background:#173374; border:1px solid #33FFFF;border-radius:8px; height:auto; width:135px;overflow:auto; padding:5px;">
<a href="https://the-best-widgets.blogspot.com/p/wigdets.html" class="button c8 px12">Video galley-1</a>
<a href="https://the-best-widgets.blogspot.com/p/blog-page_31.html" class="button c7 px12">Video gallery-2</a>
<a href="https://www.youtube.com/user/WIDGETSFORBLOGS" class="button c14 px12">My youtube channel</a>
</div></div></div>
<div id="f-box">
<a href="https://the-best-widgets.blogspot.com/p/widgets_26.html" class="button c11 px14">MY FILES</a>
</div>
<div id="f-box">
<a href="https://the-best-widgets.blogspot.com/p/blog-page.html" class="button c8 px14">MY MUSIC</a>
</div>
<div id="f-box">
<a href="https://the-best-widgets.blogspot.com/p/widgets_9083.html" class="button c12 px14">RADIO-TV-NEWS</a>
</div>
<a href="https://www.facebook.com/widgetsforblogs" target="_blank">
<img border="0" alt="Facebook" style="width: 30px; height: 30px;" src="https://lh5.googleusercontent.com/-2MBwof2uxV4/VRQN0nW6JDI/AAAAAAAAQUY/JOwLKi_llyA/s30-no/facebook-40.jpg"/></a>
<a href="https://plus.google.com/113381416528370124258/posts" target="_blank">
<img border="0" alt="Google plus" style="width: 30px; height: 30px;" src="https://lh4.googleusercontent.com/-IgW-E6gh6co/VRQN0u4sKZI/AAAAAAAAQUM/O0WMlEhgDlk/s30-no/Google%2B40.jpg"/></a>
<a href="https://www.youtube.com/user/WIDGETSFORBLOGS" target="_blank">
<img border="0" alt="YouTube" style="width: 30px; height: 30px;" src="https://lh5.googleusercontent.com/-5yqWFAAr9W4/VRQN6lH0AWI/AAAAAAAAQU0/0aiBGC97W_E/s30-no/youtube-40.jpg"/></a>
<a href="https://www.pinterest.com" target="_blank">
<img border="0" alt="Pinterest" style="width: 30px; height: 30px;" src="https://lh5.googleusercontent.com/-_uS5seiyCu4/VRQN0qs40YI/AAAAAAAAQUQ/d5ItE7IzCzE/s30-no/pinterest-40.jpg"/></a>
<a href="https://www.start.me/p/ZdezYM/widgets-for-blogs" target="_blank">
<img border="0" alt="Start.me" style="width: 30px; height: 30px;" src="https://lh5.googleusercontent.com/-jWrEy7WoWL4/VZk0By55QmI/AAAAAAAAR_E/VvsfYK0R6RA/s30-no/start.me.jpg"/></a>
