CSS3 Drop Down Menu

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

  • Σύνδεση στον Blogger 
  • Σχεδίαση / Προσθήκη gadget
  • Επιλέξτε HTML/JavaScript
  • Επικολλήστε τον παρακάτω κώδικα:
<style>
#MBT-Container {
font: normal 1em Arial, Helvetica, sans-serif;
width:100%; float:left;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
background: #0080ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJ5-lTrBmWaNT-m7iskWCusPh1jAFq8AbnrGFC6Aj-IGX-p5pFV5ZpOpmNLd-LT95bxa9U1Tw_8tcBSC274ciYQP5zHSbhiBHxm0aCkmBPKtsNMHk1ypeF8hG4oYfoX9yOsfzBfbeOnI/s1600/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none; }

/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;

text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJ5-lTrBmWaNT-m7iskWCusPh1jAFq8AbnrGFC6Aj-IGX-p5pFV5ZpOpmNLd-LT95bxa9U1Tw_8tcBSC274ciYQP5zHSbhiBHxm0aCkmBPKtsNMHk1ypeF8hG4oYfoX9yOsfzBfbeOnI/s1600/gradient.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-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: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0080ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJ5-lTrBmWaNT-m7iskWCusPh1jAFq8AbnrGFC6Aj-IGX-p5pFV5ZpOpmNLd-LT95bxa9U1Tw_8tcBSC274ciYQP5zHSbhiBHxm0aCkmBPKtsNMHk1ypeF8hG4oYfoX9yOsfzBfbeOnI/s1600/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
text-align:left;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
text-align:left;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJ5-lTrBmWaNT-m7iskWCusPh1jAFq8AbnrGFC6Aj-IGX-p5pFV5ZpOpmNLd-LT95bxa9U1Tw_8tcBSC274ciYQP5zHSbhiBHxm0aCkmBPKtsNMHk1ypeF8hG4oYfoX9yOsfzBfbeOnI/s1600/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
</style>

<div id="MBT-Container">
<ul id="nav">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Blogger Tricks</a>
<ul>
<li><a href="#">Sub-Row</a>
<ul>
<li><a href="#">Sub Sub-Row 1
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
<li><a href="#">Sub Sub-Row 1</a></li>
</a></li></ul>
</li>
<li><a href="#">Sub-Row</a>
<ul>

<li><a href="#">Sub Sub-Row 2</a></li>
</ul>
</li>
<li><a href="#">Sub-Row</a></li>
<li><a href="#">Sub-Row</a></li>
</ul>
</li>

<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Sub-Level Item 1</a></li>
<li><a href="#">Sub-Level Item 1</a>
<ul>
<li><a href="#">Sub-Level Item 11</a></li>
<li><a href="#">Sub-Level Item 22</a></li>
<li><a href="#">Sub-Level Item 33</a></li>
</ul>
</li>

<li><a href="#">Sub-Level Item 1</a></li>
</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Another Link</a></li>
<li><a href="#">Department</a>
<ul>
<li><a href="#">Sub-Level Item 2</a></li>
<li><a href="#">Sub-Level Item 2</a></li>
<li><a href="#">Sub-Level Item 2</a></li>
</ul>
</li>
</ul>
</li><li><a href="#">Sitemap</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Create This »</a></li>

</ul></div>
<br/>

  • Αποθήκευση και είστε έτοιμοι να το επεξεργαστείτε στ'ηνοντας το menu που χρειάζεται η Σελίδα σας.

4 comments:

  1. Το μενού που ανοίγει με τους φακέλους κλπ. είναι κρυμμένο πίσω απο τις αναρτήσεις, δεν εμφανίζεται μπροστά.

    Σας παρακαλώ μπορείτε να με βοηθήσετε?

    ReplyDelete
    Replies
    1. To βρήκα μόνη μου, για όσους έχουν το ίδιο πρόβλημα, μια προσθήκη του z-index και εμφανίζεται κανονικά μπροστά.

      Delete
    2. Δεν κατάλαβα..
      Τι πρέπει να κάνω? Την μπάρα μου την δείχνει κάπως περίεργα..

      Delete
  2. ti enoi me to z-index???? pos to vazoume auto??????

    ReplyDelete

 
back to top