blggerstep: Menu dhtml submenu horizontal simple a modiffier black green menu

Démo
HTML CODE
CSS CODE

<ul id="menuvert">
            <li class="topitem"><a title="welcom" href="#">welcom</a></li>

<li class="topitem">
              <a title="What's up" href="#"><span>What's up</span></a>

<ul class="submenu">
                <li class="subfirst"><a title="vous pouvez écrire ici un petit text pour donner un peu de largeur" href="#">vous ecrire ici un petit text pour donner<br />
                un peu de largeur</a></li>

<li><a title="vous pouvez écrire ici un petit text pour donner un peu de largeur " href="#">vous ecrire ici un petit text pour donner un peu de largeur</a></li>

<li class="sublast"><a title="vous ecrire ici un petit text pour donner un peu de largeur " href="#">vous ecrire ici un petit text pour donner un peu de largeur</a></li>
              </ul>
            </li>

<li class="topitem">
              <a title="How to Use" href="#"><span>page1</span></a>

<ul class="submenu">
                <li class="subfirst"><a title="page1.1" href="#">page1.1</a></li>

<li><a title="page1.2" href="#">page1.2</a></li>

<li class="sublast"><a title="page1.3" href="#">page1.3</a></li>
              </ul>
            </li>

<li class="topitem">
              <a title="Demos" href="#"><span>page-3</span></a>

<ul class="submenu">
                <li class="subfirst">
                  <a title="sub-page3.1" href="#"><span>sub-page3.1</span></a>

<ul class="submenu">
                    <li class="subfirst"><a title="sub-page3.1.1" href="#">sub-page3.1.1</a></li>

<li><a title="sub-page3.1.2" href="#">sub-page3.1.2</a></li>

<li><a title="Android Blue" href="#">sub-page3.1.3</a></li>

<li><a title="sub-page3.1.4" href="#">sub-page3.1.4</a></li>

<li class="sublast"><a title="sub-page3.1.5" href="#">sub-page3.1.5</a></li>
                  </ul>
                </li>

<li class="sublast">
                  <a title="sub-page-3.2" href="#"><span>sub-page-3-2</span></a>

<ul class="submenu">
                    <li class="subfirst"><a title="sub-page-3.2.1" href="#">sub-page-3.2.1</a></li>

<li><a title="sub-page-3.2.2" href="#">sub-page-3.2.2</a></li>

<li><a title="sub-page-3.2.3" href="#">sub-page-3.2.3</a></li>

<li><a title="sub-page-3.2.4" href="#">sub-page-3.2.4</a></li>

<li><a title="sub-page-3.2.5" href="#">sub-page-3.2.5</a></li>

<li class="sublast"><a title="sub-page-3.2.6" href="apple-green.html">sub-page-3.3.6</a></li>
                  </ul>
                </li>
              </ul>
            </li>

<li class="topitem">
              <a title="Download" href="#"><span>page-4</span></a>

<ul class="submenu">
                <li class="subfirst"><a title="page-4.1" href="#">page 4.1</a></li>

<li class="sublast"><a title="page-4.2" href="#">page 4.2</a></li>
              </ul>
            </li>
          </ul>

<style>
 ul#menuvert ul{
 display:none;position:absolute;left:-1px;top:98%;padding:0 6px 6px;}
ul#menuvert li:hover>*{
 display:block;}
ul#menuvert li:hover{
 position:relative;}
ul#menuvert ul ul{
 position:absolute;left:98%;top:-2px;}
ul#menuvert,ul#menuvert ul{
 margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;}
ul#menuvert{
 padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;}
ul#menuvert li{
 display:block;white-space:nowrap;font-size:0;float:left;}
ul#menuvert>li,ul#menuvert li{
 margin:0 0 0 6px;}
ul#menuvert ul>li{
 margin:6px 0 0;}
ul#menuvert a:active, ul#menuvert a:focus{
 outline-style:none;}
ul#menuvert a{
 display:block;vertical-align:middle;border-width:0;border-style:solid;border-color:transparent;text-align:left;text-decoration:none;padding:8px 20px;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;}
ul#menuvert ul li{
 float:none;}
ul#menuvert ul a{
 text-align:left;}
ul#menuvert li:hover>a{
 background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#menuvert img{
 border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;}
ul#menuvert ul img{
 width:16px;height:16px;}
ul#menuvert img.over{
 display:none;}
ul#menuvert li:hover > a img.def{
 display:none;}
ul#menuvert li:hover > a img.over{
 display:inline;}
ul#menuvert ul span{
 background-image:none;padding-right:16px;}
ul#menuvert li.topitem>a{
 background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:1.6em;-moz-border-radius:1.6em;-webkit-border-radius:1.6em;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#menuvert li.topitem:hover>a{
 background-color:#7dfa00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:'bold 13px Arial,sans-serif';color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,endColorstr=#B355AA00)}
ul#menuvert .submenu>li{
 margin:0;}
ul#menuvert .submenu{
 background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;padding:0;}
ul#menuvert li.subfirst>a{
 border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;}
ul#menuvert li.sublast>a{
 border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;}
 </style>