ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ ΑΠΛΟ ΣΑΝ GADGET 2



ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ ΑΠΛΟ ΣΑΝ GADGET 2
Αυτό είναι ένα απλό οριζόντιο μενού με υπομενού το οποίο τοποθετήται σαν gadget κάτω ακριβώς από τον τίτλο του blog σας και είναι αυτό που δείχνει η εικόνα αριστερά. Δεν θα χρειαστεί να προσθέσετε κάτι στο πρότυπο του blog σας, αλλά θα χρειαστεί να αφαιρέσετε την ενότητα TABS που βρίσκεται περίπου στις γραμμές 325-373 πέντε γραμμές πάνω ή πέντε γραμμές κάτω θα τον βρήτε ανοίγωντας το πρώτο βελάκι που θα συναντήσετε μέσα στο πρότυπο σας για να επεκταθεί το κρυμένο μέρος του κώδικα.
Πρέπει να τον διαγράψετε αν θέλετε να λειτουργήσει το gadget του οριζοντίου μενού με υπομενού που σας δίνω παρακάτω. Αφου το διαγράψετε σώστε το πρότυπό σας και πηγαίνετε στη διάταξη / προσθήκη gadget  / HTML/Javascript  και κάντε επικόλληση τον παρακάτω κώδικα. Μην ξεχάσετε να αλλάξετε τα links μου με τα δικά σας links. Εχω προσθέσει και μια παραλλαγή του 2ου μέρους αυτού του κώδικα που εμφανίζει και 2ο υπομενού επιλέξτε όποια σας εξυπηρετεί καλύτερα.


<style>
#mbt-menu, #mbt-menu ul {margin: 0;padding: 0;list-style: none;}
#mbt-menu {overflow:visible;width: 1500px;margin: 0px auto;border: 1px solid #FBBB22;background-color: #333333; -moz-border-radius: 6px; -webkit-border-radius: 6px;
border-radius: 6px;}
#mbt-menu:before, #mbt-menu:after {content: "";display: table;}
#mbt-menu:after {clear: both;}
#mbt-menu {zoom:1;}
#mbt-menu li {float: left;border-right: 1px solid #FBBB22;position: relative;}
#mbt-menu a {float: left;padding: 11px 8px;color: #FFFFFF;border-bottom: 1px solid #FBBB22;font: 13px Arial,text-decoration: none;}
#mbt-menu li:hover > a {color: #FFFF00;}
*html #mbt-menu li a:hover { /* IE6 only */ color: #FFFF00;}
#mbt-menu ul {margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity:0;visibility: hidden; position: absolute; top: 38px; left: 0z-index: 9999; background: #333333;
-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
#mbt-menu li:hover > ul {opacity: 1;visibility: visible;margin: 0;}
#mbt-menu ul ul {top: 0;left: 240px;margin: 0 0 0 4x;_margin: 0; /*IE6 only*/}
#mbt-menu ul li {float: none;display: block;border: 0;_line-height: 0; /*IE6 only*/}
#mbt-menu ul li:last-child {-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
#mbt-menu ul a {padding: 8px;width: 240px;_height: 10px; /*IE6 only*/ display: block; white-space: nowrap;float: none;text-transform: none;}
#mbt-menu ul a:hover {background-color: #740777;}
#mbt-menu ul li:first-child > a { -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;}
#mbt-menu ul li:first-child > a:after {content: '';position: absolute;left: 40px;top: -6px;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #FBBB22;}
#mbt-menu ul ul li:first-child a:after {left: -6px;top: 50%;margin-top: -6px;border-bottom 6px solid #FBBB22;}
#mbt-menu ul li:first-child a:hover:after {border-bottom-color: #FBBB22;}
#mbt-menu ul ul li:first-child a:hover:after {border-bottom-color: #FBBB22;}
#mbt-menu ul li:last-child > a {-moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px;}
</style>

<ul id="mbt-menu">
<li><a href='http://the-best-widgets.blogspot.gr'>HOME</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/my-posts.html'>MY POSTS</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/blog-page_11.html'>MY LINKS</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/wigdets.html'>MY VIDEOS </a><ul>
<li><a href='https://www.youtube.com/user/WIDGETSFORBLOGS'>Widgets for blogs videos</a></ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_859.html'>MY PHOTOS ▼</a><ul>
<li><a href='http://myphotos77.imgur.com/' title='Imgur.com'>Imgur.com</a></li>
<li><a href='http://www.flickr.com/photos/98183932@N02/sets'>Flickr.com</a></li>
<li><a href='https://www.pinterest.com/photos1000'>Pinterest.com</a></ul>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_26.html'>MY FILES ▼</a><ul>
<li><a href='https://drive.google.com/folderview?id=0B8GeBeRdN9NsX0RKYzZOemtwOWM&usp=sharing'>Annimated Gifs</a></li>
<li><a href='https://drive.google.com/folderview?id=0B8GeBeRdN9NsT3VPRkpOYmUwSVU&usp=sharing'>Blogger backrounds</a></li>
<li><a href='https://app.box.com/s/chdfmak9du0v6hlg0h5b'>Ringtones</a></li>
<li><a href='https://app.box.com/s/if98ihmj6bs15f69bro2'>Free programs</a></ul></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/blog-page.html'>MY MUSIC</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/my-forum.html'>FORUM+CHAT</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_9083.html'>RADIO+TV</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/wigdets_31.html'>NEWS</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/p/widgets_3619.html'>RSS</a></ul> 

ΑΝ ΘΕΛΕΤΕ ΑΝΤΙΚΑΤΑΣΤΗΣΤΕ ΤΟ 2Ο ΜΕΡΟΣ ΤΟΥ ΚΩΔΙΚΑ ΜΕ ΤΗΝ ΠΑΡΑΛΛΑΓΗ ΤΩΝ 2 ΥΠΟΜΕΝΟΥ.
<ul id="mbt-menu">
<li><a href="http://the-best-widgets.blogspot.gr">HOME</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/p/my-posts.html">MY POSTS ▼</a>
<ul>
<li><a href="#">MY LINK-1.1 ►</a>
<ul>
<li><a href="#">MY LINK-1.1.1</a><li>
<li><a href="#">MY LINK-1.1.2</a></li>
<li><a href="#">MY LINK-1.1.3</a></li>
<li><a href="#">MY LINK-1.1.4</a></li>
<li><a href="#">MY LINK-1.1.5</a>
</ul></li>
<li><a href="#">MY LINK-1.2 ►</a>
<ul>                 
<li><a href="#">MY LINK-1.2.1</a><li>
<li><a href="#">MY LINK-1.2.2</a></li>
<li><a href="#">MY LINK-1.2.3</a></li>
<li><a href="#">MY LINK-1.2.4</a></li>
<li><a href="#">MY LINK-1.2.5</a>
</ul></li>
<li><a href="#">MY LINK-1.3 ►</a>
<ul>                 
<li><a href="#">MY LINK-1.3.1</a><li>
<li><a href="#">MY LINK-1.3.2</a></li>
<li><a href="#">MY LINK-1.3.3</a></li>
<li><a href="#">MY LINK-1.3.4</a></li>
<li><a href="#">MY LINK-1.3.5</a>
</ul></li>
<li><a href="#">MY LINK-1.4 ►</a>
<ul>                  
<li><a href="#">MY LINK-1.4.1</a><li>
<li><a href="#">MY LINK-1.4.2</a></li>
<li><a href="#">MY LINK-1.4.3</a></li>
<li><a href="#">MY LINK-1.4.4</a></li>
<li><a href="#">MY LINK-1.4.5</a>
</ul></li>
<li><a href="#">MY LINK-1.5 ►</a>
<ul>                 
<li><a href="#">MY LINK-1.5.1</a><li>
<li><a href="#">MY LINK-1.5.2</a></li>
<li><a href="#">MY LINK-1.5.3</a></li>
<li><a href="#">MY LINK-1.5.4</a></li>
<li><a href="#">MY LINK-1.5.5</a>
</ul></ul>
<li><a href="http://the-best-widgets.blogspot.gr/p/blog-page_11.html">MY LINKS ▼</a>
<ul>
<li><a href="#">MY LINK 2.1 ►</a>
<ul>
<li><a href="#">MY LINK-2.1.1</a><li>
<li><a href="#">MY LINK-2.1.2</a></li>
<li><a href="#">MY LINK-2.1.3</a></li>
<li><a href="#">MY LINK-2.1.4</a></li>
<li><a href="#">MY LINK-2.1.5</a>
</ul>
</li>
<li><a href="#">MY LINK 2.2</a></li>
<li><a href="#">MY LINK 2.3</a></li>
<li><a href="#">MY LINK 2.4</a></li>
<li><a href="#">MY LINK 2.5 ►</a>
<ul>
<li><a href="#">MY LINK-2.5.1</a><li>
<li><a href="#">MY LINK-2.5.2</a></li>
<li><a href="#">MY LINK-2.5.3</a></li>
<li><a href="#">MY LINK-2.5.4</a></li>
<li><a href="#">MY LINK-2.5.5</a></li>
</ul></ul>
<li><a href="#">MY PHOTOS ▼</a>
<ul>
<li><a href="#">MY LINK 3.1</a></li>
<li><a href="#">MY LINK 3.2</a></li>
<li><a href="#">MY LINK 3.3</a></li>
<li><a href="#">MY LINK 3.4</a></li>
<li><a href="#">MY LINK 3.5</a>
</ul></li>
<li><a href="#">MY VIDEOS ▼</a>
<ul>
<li><a href="#">MY LINK 4.1</a></li>
<li><a href="#">MY LINK 4.2</a></li>
<li><a href="#">MY LINK 4.3</a></li>
<li><a href="#">MY LINK 4.4</a></li>
<li><a href="#">MY LINK 4.5</a>
</ul></li>
<li><a href="#">MY MUSIC ▼</a>
<ul>
<li><a href="#">MY LINK 5.1</a></li>
<li><a href="#">MY LINK 5.2</a></li>
<li><a href="#">MY LINK 5.3</a></li>
<li><a href="#">MY LINK 5.4</a></li>
<li><a href="#">MY LINK 5.5</a>
</ul></li>
<li><a href="#">MY PRESENTATIONS ▼</a>
<ul>
<li><a href="#">MY LINK 6.1</a></li>
<li><a href="#">MY LINK 6.2</a></li>
<li><a href="#">MY LINK 6.3</a></li>
<li><a href="#">MY LINK 6.4</a></li>
<li><a href="#">MY LINK 6.5</a>
</ul></li>
<li><a href="#">MY FILES ▼</a>
<ul>
<li><a href="#">MY LINK 7.1</a></li>
<li><a href="#">MY LINK 7.2</a></li>
<li><a href="#">MY LINK 7.3</a></li>
<li><a href="#">MY LINK 7.4</a></li>
<li><a href="#">MY LINK 7.5</a>
</ul></li>
<li><a href="#">MY E-BOOKS ▼</a>
<ul>
<li><a href="#">MY LINK 8.1</a></li>
<li><a href="#">MY LINK 8.2</a></li>
<li><a href="#">MY LINK 8.3</a></li>
<li><a href="#">MY LINK 8.4</a></li>
<li><a href="#">MY LINK 8.5</a>
</ul></li>
<li><a href="#">MY WIDGETS ▼</a>
<ul>
<li><a href="#">MY LINK 9.1</a></li>
<li><a href="#">MY LINK 9.2</a></li>
<li><a href="#">MY LINK 9.3</a></li>
<li><a href="#">MY LINK 9.4</a></li>
<li><a href="#">MY LINK 9.5</a>
</ul></li>
<li><a href="#">MY FORUM</a></li>
<li><a href="#">MY NEWS</a></li>
<li><a href="#">RSS</a></li>
</ul>