MEGA MENU WITH COLOR BUTTONS

MEGA MENU WITH COLOR BUTTONS

Το παρακάτω mega menu έχει έγχρωμα buttons ακόμα και στα υπομενού του. Μπορεί να μπεί απλά σαν gadget στο οριζόντιο κουτάκι gadget του blogger. Αντιγράψτε τον παρακάτω κώδικα αλλάζοντας τα δικά μου links με τα δικά σας. Μπορείτε να αλλάξετε και τις διαστάσεις των υπομενού για να χωράνε τα buttons σας και εννοείται και τα χρώματα των buttons και των υπομενού.

ΔΕΙΤΕ ΤΟ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΕΝΑ DEMO BLOG ΕΔΩ ►

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>