Radio Mneu Drop Down

by sanaullah Rais

HTML

<section id="menu">
	<ul>
    	<li data-msg="1">
        	<label for="trabajo">HTML</label><input name="radio" type="radio" checked id="trabajo">
            <section class="ventana">
            	<article class="trabajo">CSS3 Beautiful Menus</article>
            </section>
        </li>
        <li data-msg="2">
        	<label for="email">E-mail</label><input name="radio" type="radio" id="email">
            <section class="ventana">
            	<article class="email">
                	<h1>Gmail</h1>
<p>Send email form Gmail</p>
                </article>
                <article class="email">
                	<h1>Hotmail</h1>
                    <h2>Microsoft</h2>
                    <p>Send email form Hotmail</p>
                </article>
            </section>
        </li>
        <li data-msg="5">
        	<label for="amigos">Softwares</label><input name="radio" type="radio" id="amigos">
            <section class="ventana">
            	<article class="amigo">
                	<figure class="foto"></figure>
                    <h1>Menu creator</h1>
                    <p>Create menus</p>
                </article>
                <article class="amigo">
                	<figure class="foto"></figure>
                    <h1>Winrar</h1>
                    <p>Extract files online</p>
                </article>
                <article class="amigo">
                	<figure class="foto"><img src="http://profile.ak.fbcdn.net/hprofile-ak-ash2/174701_139091609448333_1081467231_q.jpg" alt="Foto Amigo"></figure>
                    <h1>Windows 8</h1>
                    <p>Microsoft Window 8.1</p>
                </article>
                <article class="amigo">
                	<figure class="foto"></figure>
                    <h1>Blogger</h1>
                    <p>Get Templates</p>
                </article>
                <article class="amigo">
                	<figure class="foto"></figure>
                    <h1>Teez Services</h1>
               ...

CSS

#menu{
	width:400px;
	height:40px;
	overflow:hidden;
	background-image: linear-gradient(bottom, rgb(123,168,55) 50%, rgb(160,202,83) 79%);
	background-image: -o-linear-gradient(bottom, rgb(123,168,55) 50%, rgb(160,202,83) 79%);
	background-image: -moz-linear-gradient(bottom, rgb(123,168,55) 50%, rgb(160,202,83) 79%);
	background-image: -webkit-linear-gradient(bottom, rgb(123,168,55) 50%, rgb(160,202,83) 79%);
	background-image: -ms-linear-gradient(bottom, rgb(123,168,55) 50%, rgb(160,202,83) 79%);
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.5, rgb(123,168,55)),
		color-stop(0.79, rgb(160,202,83))
	);
	margin-top:20px;
	margin-left:auto;
	margin-right:auto;
	border-radius:6px;
}
	#menu ul li:after{
		 width:10px;
		 height:10px;
		 content:attr(data-msg);
		 position:absolute;
		 border-radius:50%;
		 border-top:rgb(123,168,55) 1px solid;
		 border-bottom:#030 1px solid;
		 font-size:8px;
		 text-align:center;
		 background:#FFF;
		 padding:5px 5px 5px 5px;
		 margin-top:-10px;
		 margin-left:-60px;
	 }
		#menu ul li label{
			width:100px;
			height:12px;
			padding-top:15px;
			font-size:12px;
			font-weight:bold;
			text-align:center;
			text-transform:uppercase;
			color:#FFF;
			float:left;
		}
		#menu ul li label + input[type=radio]{
			display:none;
		}
		#menu ul li label + input[type=radio]:checked{
			display:none;
			color:#fff;
		}
		#menu ul li input[type=radio]:checked + .ventana{
			opacity:1;
		}
		#menu ul li .ventana{
			width:398px;
			height:auto;
			overflow:hidden;
			border:#CCC 1px solid;
			border-radius:6px;
			opacity:0;
			-webkit-transition:all .5s ease-in-out;
			-moz-transition:all .5s ease-in-out;
			-ms-transition:all .5s ease-in-out;
			-o-transition:all .5s ease-in-out;
			transition:all .5s ease-in-out;
			position:absolute;
			margin-top:45px;
		}
		#menu ul li .ventana:first-child{
			opacity:1;
		}
		
		.trabajo{
			width:100%;
			display:block;
			height:auto;
			border-bottom:#CCC...