Egy újabb vizszintes css3 menü. Demó:

A menüt lehet persze méretezni szélességileg, csak én kicsit lejebb vettem, mert széthúzta volna az oldalt. Ehhez a részhez oda is írtam, hogy hol tudjátok méretezni.
A kód pedig a következő

HTML kód:

 

<nav id="menu">

<ul>

<li>

<a href="#">Próba 1</a></li>

<li>

<a href="#">Próba 2</a>

<ul>

<li>

<a href="#">Első</a></li>

<li>

<a href="#">Második</a></li>

<li>

<a href="#">Harmadik</a></li>

<li>

<a href="#">Negyedik</a></li>

</ul>

</li>

</ul>

</nav>

 

<style type="text/css">

#menu {

margin:10px auto;

width:510px;  /* menü szélessége */

}

 

#menu > ul {

margin:0px;

padding:0px;

}

#menu > ul > li {

margin:0px;

padding:0px;

list-style:none;

float:left;

width:20%;

position:relative;

}

#menu > ul > li > a {

display:block;

text-align:center;

font-weight:bold;

text-decoration:none;

background: rgb(246,248,249); /* Old browsers */

background: -moz-linear-gradient(top,  rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#8217;#f6f8f9', endColorstr=&#8217;#f5f7f9',GradientType=0 ); /* IE6-9 */

text-shadow:1px 1px 0px rgba(255,255,255,0.9);

color:#2797C6;

padding:10px;

border:1px solid #D9DDE0;

border-left:0px solid;

-moz-box-shadow: inset -1px -1px 1px #FFF;

-webkit-box-shadow: inset -1px -1px 1px #FFF;

box-shadow: inset -1px -1px 1px #FFF;

}

#menu > ul > li:first-child > a {

border-left:1px solid #D9DDE0;

}

#menu > ul > li.spacer {

float:none;

clear:both;

}

#menu > ul > li > a:hover {

background: rgb(183,222,237); /* Old browsers */

background: -moz-linear-gradient(top,  rgba(183,222,237,1) 0%, rgba(113,206,239,1) 50%, rgba(33,180,226,1) 51%, rgba(183,222,237,1) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(183,222,237,1)), color-stop(50%,rgba(113,206,239,1)), color-stop(51%,rgba(33,180,226,1)), color-stop(100%,rgba(183,222,237,1))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(183,222,237,1) 0%,rgba(113,206,239,1) 50%,rgba(33,180,226,1) 51%,rgba(183,222,237,1) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#8217;#b7deed&#8217;, endColorstr=&#8217;#b7deed&#8217;,GradientType=0 ); /* IE6-9 */

text-shadow:0px 0px 0px rgba(255,255,255,0.9);

color:#FFF;

}

/* Zweite Ebene */

#menu > ul > li > ul {

opacity:0;

position:absolute;

margin:-1px 0px 0px 0px;

padding:0px;

width:100%;

}

#menu > ul > li:hover > ul {

opacity:0.95;

-o-transition: all 0.6s ease-in-out;

-webkit-transition: all 0.6s ease-in-out;

-moz-transition: all 0.6s ease-in-out;

-ms-transition: all 0.6s ease-in-out;

transition: all 0.6s ease-in-out;  

}

#menu > ul > li > ul > li {

margin:0px;

padding:0px;

list-style:none;

}

#menu > ul > li > ul > li > a {

display:block;

font-size:0.9em;

text-decoration:none;

background: rgba(0,0,0,0.7);

padding:5px;

color:#FFF;

font-weight:bold;

border:1px solid rgba(0,0,0,0.2);

border-top:0px solid;

-moz-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.2);

-webkit-box-shadow: inset -1px -1px 1px rgba(255,255,255,0.2);

box-shadow: inset -1px -1px 1px rgba(255,255,255,0.2);

}

#menu > ul > li > ul > li > a:hover {

background: rgba(0,0,0,0.9);

-o-transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;  

} </style>

</p>