Horizontal Dropdown Menu με CSS3

Φίλοι bloggers, ένα Horizontal Dropdown  Menu με CSS3 σας δίνω σήμερα...Για να το δείτε στη πράξη, βάλτε όλο το κώδικα που σας δίνω παρακάτω στο demo blog που δοκιμάζω κάθε gadget...Οσοι γνωρίζουν πως να τον εγκαταστήσουν στο πρότυπό τους, δεν θα έχουν κανένα πρόβλημα...Οσοι δεν έχουν αρκετή πείρα, ας το αγνοήσουν, και σίγουρα θα βρούν κάποιο άλλο μενου πιο εύκολο μέσα στις αναρτήσεις μου !!!


Ο ΚΩΔΙΚΑΣ CSS3:  
τοποθετείται μέσα στο HTML του προτύπου, 
ακριβώς ΠΑΝΩ από τη φράση ]]></b:skin>


<!-- ΑΡΧΗ ΤΟΥ ΜΕΝΟΥ -->
#menu-bar22 {
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 0px 6px;
  height: 34px;
  line-height: 100%;
  border-radius: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  box-shadow: 2px 2px 3px #666666;
  -webkit-box-shadow: 2px 2px 3px #666666;
  -moz-box-shadow: 2px 2px 3px #666666;
  background: #8B8B8B;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9, endColorstr=#7A7A7A);
  background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
  background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
  border: solid 1px #6D6D6D;
}
#menu-bar22 li {
  margin: 0px 6px 0px 6px;
  padding: 0px 0px 6px 0px;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar22 a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 8px 20px 8px 20px;
  margin: 0;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  text-shadow: 2px 2px 3px #000000;
}
#menu-bar22 .current a, #menu-bar22 li:hover > a {
  background: #0399D4;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);
  background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
  background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  color: #444444;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar22 ul li:hover a, #menu-bar22 li:hover li a {
  background: none;
  border: none;
  color: #666;
  -box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#menu-bar22 ul a:hover {
  background: #0399D4 !important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA);
  background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
  background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  color: #FFFFFF !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 2px 2px 2px #FFFFFF;
}
#menu-bar22 ul {
  background: #DDDDDD;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  display: none;
  margin: 0;
  padding: 0;
  width: 150px;
  position: absolute;
  top: 30px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-box-shadow: 2px 2px 3px #222222;
  -moz-box-shadow: 2px 2px 3px #222222;
  box-shadow: 2px 2px 3px #222222;
}
#menu-bar22 li:hover > ul {
  display: block;
}
#menu-bar22 ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#menu-bar22 ul a {
  padding:10px 0px 10px 15px;
  color:#424242 !important;
  font-size:12px;
  font-style:normal;
  font-family:arial;
  font-weight: normal;
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar22 ul li:first-child > a {
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
}
#menu-bar22 ul li:last-child > a {
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
}
#menu-bar22:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar22 {
  display: inline-block;
}
  html[xmlns] #menu-bar22 {
  display: block;
}
* html #menu-bar22 {
  height: 1%;
}
<!-- ΤΕΛΟΣ  ΤΟΥ ΜΕΝΟΥ -->


Ο ΚΩΔΙΚΑΣ HTML: (βαλτε τον σαν gadget/javascript ψηλά στα gadgets)

<ul id="menu-bar22">
 <li class="current"><a href="#">ΑΡΧΙΚΗ</a></li>
 <li><a href="#">ΘΕΜΑ 1</a>
  <ul>
   <li><a href="#">ΤΙΤΛΟΣ 1</a></li>
   <li><a href="#">ΤΙΤΛΟΣ 2</a></li>
   <li><a href="#">ΤΙΤΛΟΣ 3</a></li>
   <li><a href="#">ΤΙΤΛΟΣ 4</a></li>
  </ul>
 </li>
 <li><a href="#">ΘΕΜΑ 2</a>
  <ul>
   <li><a href="#">ΤΙΤΛΟΣ 1</a></li>
   <li><a href="#">ΤΙΤΛΟΣ 2</a></li>
   <li><a href="#">ΤΙΤΛΟΣ 3</a></li>
   <li><a href="#">ΤΙΤΛΟΣ 4</a></li>
  </ul>
 </li>
 <li><a href="#">ΘΕΜΑ 3</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>

ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!