ΚΑΘΕΤΟ ΜΕΝΟΥ ΜΕ 2 ΥΠΟΜΕΝΟΥ ΑΠΛΟ ΣΑΝ GADGET Νο 2

ΚΑΘΕΤΟ ΜΕΝΟΥ ΜΕ 2 ΥΠΟΜΕΝΟΥ ΑΠΛΟ ΣΑΝ GADGET Νο 2
MENU
Αυτό είναι ένα απλό κάθετο μενού με 2 υπομενού το οποίο τοποθετήται σαν gadget σε όποια πλευρική μπάρα θέλετε. Είναι αυτό που βλέπετε σε λειτουργία σε αυτήν την ανάρτηση. Για το βάλετε πηγαίνετε στη διάταξη / προσθήκη gadget  / HTML/Javascript  και κάντε επικόλληση τον παρακάτω κώδικα. Μην ξεχάσετε να αλλάξετε τα links μου με τα δικά σας links. Έχω χρωματίσει ότι μπορεί να αλλαχτεί, ύψος & πλάτος μενού, μέγεθος γραμματοσειράς, χρώματα backround και κειμένου, κατηγοριές και τίτλοι των μενού.



<style type="text/css">
#navigation {font-size:13px Arial;width:240px;padding:0px;border: solid 1px #FFFF00;}
#navigation ul {margin:0px; padding:0px;}
#navigation li {margin:0px; padding:2px;list-style: none;}
ul.top-level {background:#173377;}
ul.top-level li {margin:0; padding:2px;}
#navigation a {color: #FFFFFF;cursor: pointer;display:block;text-decoration:none;width:100%;}
#navigation a:hover {text-decoration:none;}
#navigation li:hover {background: #155200;position: relative;}
ul.sub-level {display: none;}
li:hover .sub-level {background: #333333;border: solid 1px #FFFF00;display:block;position:absolute;left: 240px;top: -5px;}
ul.sub-level li {border: none;float:left;width:340px;}
#navigation .sub-level {background: #540444;border: solid 1px #FFFF00;}
#navigation .sub-level .sub-level {background: #661111;margin-left:104px;}
li:hover .sub-level .sub-level {display:none;}
.sub-level li:hover .sub-level {display:block;}
</style>

<div id="navigation">
<ul class="top-level">
<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="#">MY LABELS ►</a>
<ul class="sub-level">
<li><a href="http://the-best-widgets.blogspot.gr/search/label/TEXT BOXES">TEXT BOXES</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/search/label/BACKGROUNDS">BACKGROUNDS</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/IMAGE EFFECTS'>IMAGE EFFECTS</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΕΝΣΩΜΑΤΩΣΗ ΑΡΧΕΙΩΝ'>ΕΝΣΩΜΑΤΩΣΕΙΣ</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΑΣΦΑΛΕΙΑ BLOG'>ΑΣΦΑΛΕΙΑ BLOG</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΣΧΟΛΙΑ BLOGGER'>ΣΧΟΛΙΑ BLOGGER</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/SEO'>ΣΥΜΒΟΥΛΕΣ SEO</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/FACEBOOK WIDGETS'>FACEBOOK WIDGETS</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΜΟΡΦΟΠΟΙΗΣΗ BLOG'>ΜΟΡΦΟΠΟΙΗΣΗ BLOG</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/WIDGETS ΓΙΑ BLOGS'>ΑΛΛΑ WIDGETS ΓΙΑ BLOGS</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΤΑΞΙΝΟΜΗΣΗ ΑΝΑΡΤΗΣΕΩΝ'>ΤΑΞΙΝΟΜΗΣΗ ΑΝΑΡΤΗΣΕΩΝ</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ'>ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/ΚΥΛΙΟΜΕΝΑ LINKS TEXT IMAGES'>ΚΥΛΙΟΜΕΝΑ LINKS TEXT IMAGES</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/SOSIAL BUTTONS'>BUTTONS & POP UP WINDOWS</a></li>
<li><a href='http://the-best-widgets.blogspot.gr/search/label/SLIDESHOWS'>GALLERIES SLIDERS SLIDESHOWS</a>
</ul></li>
<li><a href="#">MY PHOTOS ►</a>
<ul class="sub-level">
<li><a href="http://the-best-widgets.blogspot.gr/p/photo-gallery-1.html">PHOTO GALLERY-1</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/p/photo-gallery-2.html">PHOTO GALLERY-2</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/p/picasa-slideshow.html">PICASA SLIDESHOW</a></li>
<li><a href="http://the-best-widgets.blogspot.gr/p/imgur-slideshow.html">IMGUR SLIDESHOW ►</a>
<ul class="sub-level">
<li><a href="http://imgur.com/a/B9rEN">SANTORINI PHOTOS</a></li>
<li><a href="http://imgur.com/a/2OFXh">LEYKADA PHOTOS</a></li>
<li><a href="http://imgur.com/a/PZHdg">SAMOS PHOTOS</a></li>
<li><a href="http://imgur.com/a/RCZnw">SKOPELOS PHOTOS</a>
</ul></li>
</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/widgets_26.html">MY FILES</a></li>
</ul>
</div>

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου