MEGAMENU WITH COLOR HOVER BUTTONS IN SUBMENUS

YouTube GITHUB glitch.com JSBIN Start.me JSFIDDLE CODEPLY Repl.it CODEPEN CODEPEN Codesandbox.io 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<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;} 
/* COLOR BUTTONS 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>  
<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" target="_parent" class="button c9 px14">HOME</a>
</div>

<div id="f-box">
<a href="#" target="_parent" 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" target="_parent" class="button c8 px12">Όλα τα άρθρα (2 στήλες μόνο τίτλοι)</a>
<a href="https://the-best-widgets.blogspot.com/p/my-posts_19.html" target="_parent" class="button c7 px12">Όλα τα άρθρα (3 στήλες μόνο τίτλοι)</a>
<a href="https://the-best-widgets.blogspot.com/p/widgets_3619.html" target="_parent" class="button c14 px12">Όλα τα άρθρα 21 καρτέλες μόνο τίτλοι</a>
<a href="https://the-best-widgets.blogspot.com/p/my-forum.html" target="_parent" 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:255px;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/ΤΑΞΙΝΟΜΗΣΗ ΑΝΑΡΤΗΣΕΩΝ?max-results=48" class="button c3 px12">Ταξινόμηση αναρτήσεων (16)</a>
<a href="https://the-best-widgets.blogspot.gr/search/label/BACKGROUNDS?max-results=48" class="button c8 px12">Backgrounds (26)</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=48" 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=48" 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/sosial-networks-links-3.html" target="_parent" class="button c13 px12">All my links in tabs</a>
<a href="https://the-best-widgets.blogspot.com/p/blog-page_11.html" target="_parent" class="button c7 px12">Sosial Networks links</a>
<a href="https://the-best-widgets.blogspot.com/p/ranks.html" target="_parent" class="button c3 px12">Best Sites & Blogs links</a>
<a href="https://the-best-widgets.blogspot.com/p/my-links-3.html" target="_parent" class="button c8 px12">My links in a blank page</a>
<a href="https://the-best-widgets.blogspot.com/2013/07/widgets-for-all.html" target="_parent" class="button c6 px12">300+ Widgets for blogs</a>
<a href="https://the-best-widgets.blogspot.com/p/wigdets_31.html" target="_parent" class="button c12 px12">300+ Html-css-js codes</a>
<a href="https://the-best-widgets.blogspot.com/p/blog-page_3.html" target="_parent" class="button c11 px12">Tools for Bloggers 400 links</a>
<a href="https://my-posts-1.blogspot.com" target="_parent" class="button c14 px12">My demo blog</a>
<a href="https://the-best-widgets.blogspot.com/p/friendly-blogs.html" target="_parent" class="button c9 px12">My friendly blogs</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/photo-gallery-2.html" class="button c7 px12">Photo gallery-2</a>
<a href="https://the-best-widgets.blogspot.com/p/panoramio-slideshow.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.youtube.com/user/WIDGETSFORBLOGS" target="_blank">
<img border="0" alt="YouTube" style="width: 30px; height: 30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiprLiRPDXGRa5rXZeF1ixgpclglPBw1X6mC5Ie9q3I2tPqpiyvUhrjakvgzhCIXophWsVqPSmOAXvTCapLYSi1md8jtAWK4tJ9QhR23SMHUNKqsu1BIW6QRbwl-IRtbF_fsME71wo_CVJ2/s30-no/youtube-40.jpg"/></a>

<a href="https://github.com" target="_blank">
<img border="0" alt="GITHUB" style="width: 30px; height: 30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVC5SxuL952CdHxth5h6SHN7AOJrjOcX68zdOMOZbFaHVtWYGDbaO1oLWhHDxz4fIHA8rS30YnfPbuQMRi3JyLhztdSks2jqu78B7fFafQDvqK0dudhgaDEEKzc1JyJCW9LDUj8ymb13-J/s50-rw/"/></a>

<a href="https://glitch.com" title="GLITCH.COM" target="_blank">
<img border="0" alt="glitch.com" style="width: 30px; height: 30px;" src="https://i.imgur.com/rbJTZBc.jpg"/></a>

<a href="https://jsbin.com" target="_blank">
<img border="0" alt="JSBIN" style="width: 30px; height: 30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkQhshyNNKzx2eGeNwOfq_Zp6n2Mxs-rYdqixuFzg5DfBMTe9belhk5ZLLglzQhRRuD2kVAH9drFTPClb3nFYHqZspJlG9sJ3VuLRPSR6rhvPROFe0s1B0elGuHMoAZsdVE4EGc04lT8XP/s50-rw/"/></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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjby8zdIXHwgFwTlbovzaTx2-6hyphenhyphentyhCzqAWwbEJsEGhH1Q68_PscCk_aDuKen4U0GA5ZI6plSN6gxiUn2aQm4RbrtPCjjto6rctrwooKXN6kk9Zr2tDBvultlDP3vQ43SaPUhyvyZf6MNJ/s30-no/start.me.jpg"/></a>

<a href="https://jsfiddle.net/user/mycodes" target="_blank">
<img border="0" alt="JSFIDDLE" style="width: 30px; height: 30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizyzRR_vwFGFsq-dv7KsLe-X0NpOCWCeb3bJFxRrgt0P1PBSFGYQ61EjXPNudOpMYCSt3uFEWO0gaEoOoFVVx4KGtGetUAzqNdHiICVTGlIO4f-y99UpW6EGhNQEFCzrgWOYawu8lvkoQZ/s50-rw/"/></a>

<a href="https://www.codeply.com/users/dikefalos" target="_blank">
<img border="0" alt="CODEPLY" style="width: 30px; height: 30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb9sn05dNMNN6Ofn5jkeE-c2AaDqDrIV81AD2Zeyst3qjDdH6FVW41N_hlOcTMhUmoGphOVFcjuggXoE4eijG4vVTftkYX7RPKg_mCplhPzha6LK5ASkbTSC1dXHc_orLiNTzE5xzdNFjd/s50-rw/"/></a>

<a href="http://repl.it" title="REPL.IT" target="_blank">
<img border="0" alt="Repl.it" style="width: 30px; height: 30px;" src="https://i.imgur.com/0u20wez.png"/></a>

<a href="https://codepen.io/my-codes" target="_blank">
<img border="0" alt="CODEPEN" style="width: 30px; height: 30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwvZ_wlb3-J3H-hsPnXm-xzTB0Kqpu6uzXDawt7ZoWxkeN2CWJ_PKHriOHDqZu8kIRUVQBL8unK6rLBpue4I54-RraePFZqV-QY_k2PH_9FRmxholJ-j4DnLFncfGmkGdPhYGmUJejNA3F/s50-rw/"/></a>

<a href="http://next.plnkr.co" target="_blank">
<img border="0" alt="CODEPEN" style="width: 30px; height: 30px;" src="https://i.imgur.com/yn1S2OM.jpg"/></a>

<a href="https://codesandbox.io/" title="CODESANDBOX.COM" target="_blank">
<img border="0" alt="Codesandbox.io" style="width: 30px; height: 30px;" src="https://i.imgur.com/cneNyp1.jpg"/></a>