MEGA MENU WITH COLOR BUTTONS IN SUBMENUS




 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
<style>
#cssmenu{margin:0;padding:0;font:Arial;font-size:14px;font-weight:bold;width:auto}
#cssmenu ul{float:left;background:#333333;width:auto;height:35px;list-style:none;margin:0;padding:0}
#cssmenu li{float:left;width:auto;padding:0}
#cssmenu li a{float:left;background:#333333;width:auto;display:block;font-weight:normal;line-height:35px;margin:0;padding:0 3px;text-align:center;text-decoration:none}
#cssmenu > ul > li > a{color:#FFFFFF}
#cssmenu ul ul a{color:#FFFFFF}
#cssmenu li > a:hover,#cssmenu ul li:hover > a{background:#333;color:#FFFFFF;width:auto;text-decoration:none}
#cssmenu li ul{float:left;width:auto;background:#333333;display:none;height:auto;padding:0;margin:0;position:absolute;width:auto; z-index:200;/*top:1em;/*left:0;*/}
#cssmenu li:hover ul{display:block}
#cssmenu li li{float:left;background:#333;display:block;float:none;margin:0;padding:0;width:auto;}
#cssmenu li:hover li a{float:left;width:auto;background:#333}
#cssmenu li ul a{float:left;width:auto;display:block;height:25px;font-size:13px;font-style:normal;margin:0px;padding-bottom: 6px;text-align:left}
#cssmenu li ul a:hover,#cssmenu li ul li:hover > a {float:left; width:auto;background:#333;border:0;color: #FFFFFF;text-decoration:none}
#cssmenu p{clear:left}
</style>
<div id="cssmenu">
<ul>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:bold 14px arial;background:#FFF;color:#FF0000;padding:5px;width:auto;">HOME</button></a></li>
<li><a href="#"><button style="font:bold 14px arial;background:#173377;color:#FFF;padding:5px;width:auto;">ΠΕΡΙΕΧΟΜΕΝΑ ▼</button></a><br /><br />
<ul style="width:auto;background:#333;">
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#740777;color:#FFF;padding:5px;width:auto;">ALL MY POSTS (2 στήλες)</button></a></li><br />
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#400030;color:#FFF;padding:5px;width:auto;">ALL MY POSTS (3 στήλες)</button></a></li>
</ul>
<li><a href="#"><button style="font:bold 14px arial;background:#FFBB22;color:#000;padding:5px;width:auto;">ΚΑΤΗΓΟΡΙΕΣ ▼</button></a><br /><br />
<ul style="width:360px;background:#333;">
<li><a href="https://the-best-widgets.blogspot.com"><button style="float:left;font:14px arial;background:#009900;color:#FFF;padding:5px;width:auto;">CATEGORY-1</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="float:left;font:14px arial;background:#115599;color:#FFF;padding:5px;width:auto;">CATEGORY-2</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="float:left;font:14px arial;background:#661111;color:#FFF;padding:5px;width:auto;">CATEGORY-3</button></a></li><br /><br />
<li><a href="https://the-best-widgets.blogspot.com"><button style="float:left;font:14px arial;background:#FF4500;color:#FFF;padding:5px;width:auto;">CATEGORY-4</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="float:left;font:14px arial;background:#00FF00;color:#000;padding:5px;width:auto;">CATEGORY-5</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="float:left;font:14px arial;background:#FF9999;color:#000;padding:5px;width:auto;">CATEGORY-6</button></a></li><br /><br />
<li><a href="https://the-best-widgets.blogspot.com"><button style="float:left;font:14px arial;background:#740777;color:#FFF;padding:5px;width:auto;">CATEGORY-7</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="float:left;font:14px arial;background:#FF0000;color:#FFF;padding:5px;width:auto;">CATEGORY-8</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="float:left;font:14px arial;background:#105105;color:#FFF;padding:5px;width:auto;">CATEGORY-9</button></a></li><br /><br />
<li><a href="https://the-best-widgets.blogspot.com"><button style="float:left;font:14px arial;background:#532000;color:#FFF;padding:5px;width:auto;">CATEGORY-10</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="float:left;font:14px arial;background:#FFBB22;color:#000;padding:5px;width:auto;">CATEGORY-11</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="float:left;font:14px arial;background:#FF0999;color:#FFF;padding:5px;width:auto;">CATEGORY-12</button></a></li></ul>
<li><a href="#"><button style="font:14px arial;background:#105105;color:#FFF;padding:5px;width:auto;">LINKS ▼</button></a><br /><br />
<ul style="width:420px;background:#333;">
<li><a href="https://the-best-widgets.blogspot.com"><button style="float:left;font:14px arial;background:#115599;color:#FFF;padding:5px;width:auto;">LINKS-1</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="float:left;font:14px arial;background:#009900;color:#FFF;padding:5px;width:auto;">LINKS-2</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="float:left;font:14px arial;background:#115599;color:#FFF;padding:5px;width:auto;">LINKS-3</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#009900;color:#FFF;padding:5px;width:auto;">LINKS-4</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#115599;color:#FFF;padding:5px;width:auto;">LINKS-5</button></a></li><br /><br />
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#009900;color:#FFF;padding:5px;width:auto;">LINKS-6</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#115599;color:#FFF;padding:5px;width:auto;">LINKS-7</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#009900;color:#FFF;padding:5px;width:auto;">LINKS-8</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#115599;color:#FFF;padding:5px;width:auto;">LINKS-9</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#009900;color:#FFF;padding:5px;width:auto;">LINKS-10</button></a></li><br /><br />
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#115599;color:#FFF;padding:5px;width:auto;">LINKS-11</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#009900;color:#FFF;padding:5px;width:auto;">LINKS-12</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#115599;color:#FFF;padding:5px;width:auto;">LINKS-13</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#009900;color:#FFF;padding:5px;width:auto;">LINKS-14</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#115599;color:#FFF;padding:5px;width:auto;">LINKS-15</button></a></li><br /><br />
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#009900;color:#FFF;padding:5px;width:auto;">LINKS-16</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#115599;color:#FFF;padding:5px;width:auto;">LINKS-17</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#009900;color:#FFF;padding:5px;width:auto;">LINKS-18</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#115599;color:#FFF;padding:5px;width:auto;">LINKS-19</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com" target="_new"><button style="font:14px arial;background:#009900;color:#FFF;padding:5px;width:auto;">LINKS-20</button></a></li></ul>
<li><a href="#"><button style="font:14px arial;background:#740777;color:#FFF;padding:5px;width:auto;">PHOTOS ▼</button></a><br /><br />
<ul style="width:auto;background:#333;">
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#173377;color:#FFF;padding:5px;width:auto;">PHOTO GALLERY-1</button></a></li><br /><br />
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#173377;color:#FFF;padding:5px;width:auto;">PHOTO GALLERY-2</button></a></li><br /><br />
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:14px arial;background:#173377;color:#FFF;padding:5px;width:auto;">PHOTO GALLERY-3</button></a></li></ul>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:bold 14px arial;background:#33FFFF;color:#000;padding:5px;width:auto;">FILES</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:bold 14px arial;background:#FF0000;color:#FFF;padding:5px;width:auto;">VIDEOS</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:bold 14px arial;background:#FFFF99;color:#FF0000;padding:5px;width:auto;">PRESENTATIONS</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:bold 14px arial;background:#000080;color:#FFF;padding:5px;width:auto;">E-BOOKS</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:bold 14px arial;background:#00FF00;color:#000;padding:5px;width:auto;">MUSIC</button></a></li>
<li><a href="https://the-best-widgets.blogspot.com"><button style="font:bold 14px arial;background:#FF6600;color:#FFF;padding:5px;width:auto;">WIDGETS</button></a></li>
</li></li></li></li></ul></div>