Blogger - legördülő menü? :O

Nos, amint látjátok, a blogom menüje sz*r állapotban van:

http://pandorica-wonderland.blogspot.hu/

Amit szeretnék:

Menü html kódja:

<div id='cssmenu'>

<ul>

<li><a href='http://pandorica-wonderland.blogspot.hu/'><span>Főoldal</span></a></li>

<li class='has-sub'><a href='http://pandorica-wonderland.blogspot.hu/p/csj-kepek.html'><span>Galéria</span></a>

<ul>

<li class='last'><a href='http://pandorica-wonderland.blogspot.hu/p/csj-kepek.html'><span>Csábításból jeles</span></a></li>

</ul>

</li>

<li><a href='http://pandorica-wonderland.blogspot.hu/p/blog-page_3135.html'><span>Rólam</span></a></li>

<li class='has-sub'><a href='http://pandorica-wonderland.blogspot.hu/p/blog-page_9634.html'><span>Mangáim</span></a>

<ul>

<li><a href='http://pandorica-wonderland.blogspot.hu/p/blog-page_6688.html'><span>IDETITATIS</span></a></li>

<li class='has-sub'><a href='http://pandorica-wonderland.blogspot.hu/p/i-wish.html'><span>I wish!</span></a>

<ul>

<li class='last'><a href='http://pandorica-wonderland.blogspot.hu/2013/12/caroline-errown.html'><span>Szereplők</span></a></li>

</ul>

</li>

</ul>

</li>

<li class='has-sub'><a href='#'><span>YouTube</span></a>

<ul>

<li><a href='http://pandorica-wonderland.blogspot.hu/p/csabitasbol-jeles-tutorial-ok-o.html'><span>Csábításból jeles</span></a></li>

<li class='has-sub'><a href='#'><span>Végigjátszások</span></a>

<ul>

<li><a href='http://pandorica-wonderland.blogspot.hu/p/videoim.html'><span>Ib</span></a></li>

<li class='last'><a href='http://pandorica-wonderland.blogspot.hu/2013/12/the-witchs-house-vegigjatszas.html'><span>The witch's house</span></a></li>

</ul>

</li>

<li class='has-sub'><a href='#'><span>Music </span></a>

<ul>

<li class='last'><a href='http://pandorica-wonderland.blogspot.hu/p/egyeb-videok.html'><span>Zongora </span></a></li>

</ul>

</li>

</ul>

</li>

<li class='last'><a href='http://pandorica-wonderland.blogspot.hu/p/elerhetosegek.html'><span>Elérhetőségek</span></a></li>

</ul>

</div>

És a css:

#cssmenu ul,

#cssmenu li,

#cssmenu span,

#cssmenu a {

margin: 0;

padding: 0;

position: relative;

}

#cssmenu {

height: 49px;

border-radius: 5px 5px 0 0;

-moz-border-radius: 5px 5px 0 0;

-webkit-border-radius: 5px 5px 0 0;

background: #fefefe;

background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0));

background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%);

background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%);

background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%);

background: linear-gradient(top, #fefefe 0%, #eee9f0 100%);

border-bottom: 2px solid #ff7070;

width: auto;

}

#cssmenu:after,

#cssmenu ul:after {

content: '';

display: block;

clear: both;

}

#cssmenu a {

background: #fefefe;

background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));

background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);

background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);

background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);

background: linear-gradient(top, #fefefe 0%, #ececec 100%);

color: #000;

display: inline-block;

font-family: Helvetica, Arial, Verdana, sans-serif;

font-size: 12px;

line-height: 49px;

padding: 0 20px;

text-decoration: none;

}

#cssmenu ul {

list-style: none;

}

#cssmenu > ul {

float: left;

}

#cssmenu > ul > li {

float: left;

}

#cssmenu > ul > li > a {

color: #ff6161;

font-size: 12px;

}

#cssmenu > ul > li:hover:after {

content: '';

display: block;

width: 0;

height: 0;

position: absolute;

left: 50%;

bottom: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-bottom: 10px solid #ff7070;

margin-left: -10px;

}

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

border-radius: 5px 0 0 0;

-moz-border-radius: 5px 0 0 0;

-webkit-border-radius: 5px 0 0 0;

}

#cssmenu > ul > li.active:after {

content: '';

display: block;

width: 0;

height: 0;

position: absolute;

left: 50%;

bottom: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-bottom: 10px solid #ff7070;

margin-left: -10px;

}

#cssmenu > ul > li.active > a {

-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);

-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);

box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);

background: #ececec;

background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));

background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

}

#cssmenu > ul > li:hover > a {

background: #ececec;

background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));

background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);

-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);

box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);

}

#cssmenu .has-sub {

z-index: 1;

}

#cssmenu .has-sub:hover > ul {

display: block;

}

#cssmenu .has-sub ul {

display: none;

position: absolute;

width: 200px;

top: 100%;

left: 0;

}

#cssmenu .has-sub ul li {

*margin-bottom: -1px;

}

#cssmenu .has-sub ul li a {

background: #ff7070;

border-bottom: 1px dotted #ffa3a3;

filter: none;

font-size: 11px;

display: block;

line-height: 120%;

padding: 10px;

color: #ffffff;

}

#cssmenu .has-sub ul li:hover a {

background: #ff3d3d;

}

#cssmenu .has-sub .has-sub:hover > ul {

display: block;

}

#cssmenu .has-sub .has-sub ul {

display: none;

position: absolute;

left: 100%;

top: 0;

}

#cssmenu .has-sub .has-sub ul li a {

background: #ff3d3d;

border-bottom: 1px dotted #ffa3a3;

}

#cssmenu .has-sub .has-sub ul li a:hover {

background: #ff2323;

}

Ugyebár simán belépek java/script-be, bemásolom a html-t - eddig oké, de mikor a css-t az egyedi sablon készítésénél bemásolom, akkor igaz megjelenik az igazi téma, de nem gördül le, mit kéne csinálnom, hogy normális menü legyen belőle???