edena

Hi, my name is MD ,i'm a freelance web designer from Romania and this blog is my piece of heaven,i can't imagine my life without it. Why was MDTheme created ? Cause i want to share my experience and knowledge with you through my articles. I hope you can learn from me as much as i can learn from you. What about MDTheme ? Well, this place offers free web design tutorials, web design showcases, blogspot templates, CSS-HTML basic articles and more free stuffs. I hope many will find it useful. If you have any questions regarding these areas, please feel free to contact me via the comments section. I'll be in touch again soon with more details.

The news

Noutatea acestei saptamani este sablonul Blogger SoPink.Este un sablon pe care-l ofer gratuit tuturor bloggerilor care indragesc Blogspotul.

Martie 11, 2013 on blogger templates
PUB

This CSS3 Drop-Down menus are free for commercial or personal use.Both Style 1 and Style 2 works in all browsers,Style 3 works in new browsers.
Style 1 CSS code:



ul#meniu {
margin: 0 auto;
background: #333333;
border-bottom: 4px solid #FF004B;
height: 44px;
width: 980px;}

ul.navigation {
position: relative;
z-index: 100;}

ul.navigation li {
float: left;
vertical-align: middle;
zoom: 1;
line-height: 44px;}

ul.navigation li:hover {
position: relative;
z-index: 100;
cursor: default;
background: #FF004B;}

ul.navigation a {
padding: 0 20px 0 20px;
display:block;
color: #FFFFFF;
font-family: Tahoma,Arial,sans-serif;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;}

ul.navigation, ul.navigation li, ul.navigation ul {
list-style: none;
margin: 0;
padding: 0;}

ul.navigation li.active > a {
background: #FF004B;}

ul.navigation li.active > a:after {
content: "+";
margin-left: 8px;}

ul.navigation ul li:hover {
position: relative;
z-index: 100;
background: #333333;}

ul.navigation ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
width: 210px;}

ul.navigation ul li {
float: none;
background: #FF004B;
line-height: 30px;
vertical-align: middle;}

ul.navigation ul li a {
padding: 4px 5px;
vertical-align: middle;}

ul.navigation li:hover > ul {
visibility: visible;}

Style 2 CSS code:



ul#meniu {
margin: 0 auto;
background: #333333;
border-bottom: 4px solid #d9d208;
height: 44px;
width: 980px;}

ul.navigation {
position: relative;
z-index: 999;}

ul.navigation li {
float: left;
vertical-align: middle;
zoom: 1;
line-height: 44px;}

ul.navigation li:hover {
position: relative;
z-index: 100;
cursor: default;
background-color: #d9d208;}

ul.navigation a {
padding: 0 20px 0 20px;
display:block;
color: #FFFFFF;
font-family: Tahoma,Arial,sans-serif;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;}

ul.navigation, ul.navigation li, ul.navigation ul {
list-style: none;
margin: 0;
padding: 0;}

ul.navigation li.active > a {
background: #d9d208;}

ul.navigation li.active > a:after {
content: "+";
margin-left: 8px;}

ul.navigation ul li:hover {
position: relative;
z-index: 100;
background: #333333;}

ul.navigation ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
width: 210px;}

ul.navigation ul li {
float: none;
background: #d9d208;
line-height: 30px;
vertical-align: middle;}

ul.navigation ul li a {
padding: 4px 5px;
vertical-align: middle;}

ul.navigation li:hover > ul {
visibility: visible;}

Style 1 and Style 2 HTML code:


<ul class='navigation' id='meniu'>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>Meniu1</a>
<ul>
<li><a href='#'>Submeniu1</a></li>
<li><a href='#'>Submeniu2</a></li>
<li><a href='#'>Submeniu3</a></li>
<li><a href='#'>Submeniu4</a></li>
<li><a href='#'>Submeniu5</a></li>
</ul>
</li>
<li><a href='#'>Meniu2</a></li>
<li><a href='#'>Meniu3</a></li>
<li><a href='#'>Meniu4</a></li>
<li><a href='#'>Meniu5</a> </li>
<li><a href='#'>Meniu6</a></li>
</ul>

Style 3 CSS code:



.menu {
margin: 0 auto;
background: #ff8400;
-moz-box-shadow: 0px 0px 3px #888888;
-webkit-box-shadow: 0px 0px 3px #888888;
box-shadow: 0px 0px 3px #888888;
height: 44px;
width: 980px;}

.menu ul {
list-style: none;
position: relative;
z-index: 100;}

.menu li {
float: left;}

.menu li a {
line-height: 24px;
margin: 0;
padding: 10px 20px;
display: block;
color: #FFFFFF;
font-family: Tahoma,Arial,sans-serif;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);}

.menu ul .home a {
background: #000000;
color: #FFFFFF;}

.menu li a:hover {
background: #000;
-webkit-transition: all 1.3s ease-in-out;
-moz-transition: all 1.3s ease-in-out;
-o-transition: all 1.3s ease-in-out;
-ms-transition: all 1.3s ease-in-out;
transition: all 1.3s ease-in-out;
color:#FFFFFF;
text-decoration:none;}

.menu li ul {
border: 0 none;
display: none;
height: auto;
position: absolute;
width: 190px;
z-index: 100;}

.menu li:hover ul {
display:block;}

.menu li li {
float: none;}

.menu li:hover li a {
background: #000000;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-ms-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;}

.menu li ul a {
padding: 0 10px;
line-height: 33px;}

.menu li ul li:hover a {
background: #ff8900;
border: 0 none;
color: #000000;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#888888')";/* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#888888'); /* For IE 5.5 - 7 */
-moz-box-shadow: 3px 3px 3px #888888;/* Firefox */
-ms-box-shadow: 3px 3px 3px #888888; /* Internet Explorer */
-webkit-box-shadow: 3px 3px 3px #888888; /* Safari and Chrome */
-o-box-shadow: 3px 3px 3px #888888;/* Opera */
box-shadow: 3px 3px 3px #888888;/* CSS3 */}

Style 3 HTML code:


<div class='menu'>
<ul>
<li class='home'><a href='#'>Home</a></li>
<li><a href='#'>Meniu1</a></li>
<li><a href='#'>Meniu2</a>
<ul>
<li><a href='#'>Submeniu1</a></li>
<li><a href='#'>Submeniu2</a></li>
<li><a href='#'>Submeniu3</a></li>
<li><a href='#'>Submeniu4</a></li>
</ul>
</li>
<li><a href='#'>Meniu3</a>
<ul>
<li><a href='#'>Submeniu1</a></li>
<li><a href='#'>Submeniu2</a></li>
<li><a href='#'>Submeniu3</a></li>
</ul>
</li>
<li><a href='#'>Meniu4</a></li>
</ul>
</div>

2 comentarii:

  1. Anonim3/10/2013

    Wow!! thanks so much...nice menus

    RăspundețiȘtergere
  2. Anonim3/17/2013

    This menu really works !! Style 3 its my favorite .Good job ,thank u!!

    RăspundețiȘtergere

Alte noutati by MDTheme

MD Blogger Theme

mmmm

facebook