Выпадающее меню без Javascript

Долго думал ч сего начать))) решил  с самого простого)) и так вот оно))) собираюсь использовать его на этом блоге...может)



сам код меню:

<div class="menu">
    <ul> 
        <li><a href="">menu 1</a>
            <ul>
                <li><a href="" title="">site 1</a></li>
                <li><a href="" title="">site 1.1</a></li>
                <li><a href="" title="">site 1.2</a></li>
            </ul>
        </li>
        <li><a href="">menu 2</a>
            <ul>
                <li><a href="" title="">site 2</a></li>
                <li><a href="" title="">site 2.1</a></li>
                <li><a href="" title="">site 2.2</a></li>
                <li><a href="" title="">site 2.3</a></li>
                <li><a href="" title="">site 2.4</a></li>
                <li><a href="" title="">site 2.5</a></li>
            </ul>
        </li>
    </ul> 
</div>

код стиля

.menu{
    font-family:arial, sans-serif;
    width:500px;
    height:100px;
    position:relative;
    font-size:11px;
    z-index:10;
}
.menu ul li a, .menu ul li a:visited{
    width:100px;
    height:20px;
display:block;
text-decoration:none;
    text-align:center;
font-size:11px;
color:RoyalBlue;
background:GhostWhite;
    border:1px solid white;
    overflow:hidden;
line-height:20px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.menu ul{
    padding:0;
    margin:0;
    list-style:none;
}
.menu ul li{
    float:left;
    position:relative;
}
.menu ul li ul{
    display:none;
}
.menu ul li:hover a{
    color:black;
    background:LightSkyBlue;
}
.menu ul li:hover ul{
    display:block;
    position:absolute;
    top:21px;
    left:0;
    width:105px;
}
.menu ul li:hover ul li a{
    display:block;
    background:SlateGray1;
    color:RoyalBlue;
}
.menu ul li:hover ul li a:hover{
    color:black;
    background:LightSkyBlue;
}

А вот и пример.....блин....моя тема все портит.....переделаю покажу)))