When I started desinging web pages, one of my goals was making a sliding menu, without Javascript.

Today I´ll show you how I did it:

HTML:

<nav>
<li class = "parent"><a href="#">Parent</a>
<ul>
<li><a href="#">Content1</a></li>
<li><a href="#">Content2</a></li>
<li><a href="#">Content3</a></li>
</ul>
</li></nav>

And here the CSS Style:

nav{   margin:0 auto;}

nav li{   list-style: none;   position:relative;   background:orange;}

nav li a{   color:#666;   text-decoration:none;   padding-top:5px;   padding-bottom:5px;   display:block;   text-align:center;}

nav li a:hover{   color:#000;   background:#F8F8F8;}

nav li.parent:hover{   border:1px #ccc solid;   margin:-1px;   background:#F8F8F8;}

nav li li a{   width:100%;   display:block;}

nav li ul {   width:150px;   margin:0px;   display:none;   background:#F8F8F8;   border:1px #ccc solid;   position: absolute;   left: 100%;   top:-1px;}

nav li:hover ul {   display: block;   text-align:center;   padding:0px;}

Ans it´s done. Just change some atributes like color or margin and you should have a simple sliding menu.

Hope you like this post. Whatever doubt just ask me, don´t be shy.

PD: If I wrote something wrong please notice me.

PD2: You can ask me for make a post of whatever thing, I´ll try to redact it the faster I can :D