11:37 π.μ.
greek news 24
Live Demo
1..Πίνακας ελέγχου
2..Σχεδίαση
3..Στοιχεία Σελίδας
4..Προσθήκη gadget
5..HTML/Javascript
Και μέσα στο gadget βάζουμε τον παρακάτω κώδικα:
<style>/*------ Drop Down Menu By HB (helperblogger.com)---------*/#hb-menu, #hb-menu ul {margin: 0;padding: 0;list-style: none;}#hb-menu {width: 960px;margin: 60px auto;border: 1px solid #222;background-color: #111;background-image: -moz-linear-gradient(#444, #111);background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));background-image: -webkit-linear-gradient(#444, #111);background-image: -o-linear-gradient(#444, #111);background-image: -ms-linear-gradient(#444, #111);background-image: linear-gradient(#444, #111);-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;-moz-box-shadow: 0 1px 1px #777;-webkit-box-shadow: 0 1px 1px #777;box-shadow: 0 1px 1px #777;}#hb-menu:before,#hb-menu:after {content: "";display: table;}#hb-menu:after {clear: both;}#hb-menu {zoom:1;}#hb-menu li {float: left;border-right: 1px solid #222;-moz-box-shadow: 1px 0 0 #444;-webkit-box-shadow: 1px 0 0 #444;box-shadow: 1px 0 0 #444;position: relative;}#hb-menu a {float: left;padding: 12px 30px;color: #999;text-transform: uppercase;font: bold 12px Arial, Helvetica;text-decoration: none;text-shadow: 0 1px 0 #000;}#hb-menu li:hover > a {color: #fafafa;}*html #hb-menu li a:hover { /* IE6 only */color: #fafafa;}#hb-menu ul {margin: 20px 0 0 0;_margin: 0; /*IE6 only*/opacity: 0;visibility: hidden;position: absolute;top: 38px;left: 0;z-index: 9999;background: #444;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-box-shadow: 0 -1px rgba(255,255,255,.3);-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);box-shadow: 0 -1px 0 rgba(255,255,255,.3);-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;}#hb-menu li:hover > ul {opacity: 1;visibility: visible;margin: 0;}#hb-menu ul ul {top: 0;left: 150px;margin: 0 0 0 20px;_margin: 0; /*IE6 only*/-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);box-shadow: -1px 0 0 rgba(255,255,255,.3);}#hb-menu ul li {float: none;display: block;border: 0;_line-height: 0; /*IE6 only*/-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;box-shadow: 0 1px 0 #111, 0 2px 0 #666;}#hb-menu ul li:last-child {-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}#hb-menu ul a {padding: 10px;width: 130px;_height: 10px; /*IE6 only*/display: block;white-space: nowrap;float: none;text-transform: none;}#hb-menu ul a:hover {background-color: #0186ba;background-image: -moz-linear-gradient(#04acec, #0186ba);background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));background-image: -webkit-linear-gradient(#04acec, #0186ba);background-image: -o-linear-gradient(#04acec, #0186ba);background-image: -ms-linear-gradient(#04acec, #0186ba);background-image: linear-gradient(#04acec, #0186ba);}#hb-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;}#hb-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 #444;}#hb-menu ul ul li:first-child a:after {left: -6px;top: 50%;margin-top: -6px;border-left: 0;border-bottom: 6px solid transparent;border-top: 6px solid transparent;border-right: 6px solid #3b3b3b;}#hb-menu ul li:first-child a:hover:after {border-bottom-color: #04acec;}#hb-menu ul ul li:first-child a:hover:after {border-right-color: #0299d3;border-bottom-color: transparent;}#hb-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="hb-menu"> <li><a href=" # ">Home</a></li> <li> <a href=" # ">Categories</a> <ul> <li><a href=" # ">CSS</a></li> <li><a href=" # ">Graphic design</a></li> <li><a href=" # ">Development tools</a></li> <li><a href=" # ">Web design</a></li> </ul> </li> <li><a href=" # ">Work</a></li> <li><a href=" # ">About</a></li> <li><a href="#">Contact</a></li> <li><a href="http://free-bloggertips.blogspot.com/">Create This »</a></li> </ul>
Home--> Όνομα
#--> Link
6. Kάντε αποθήκευση
