<style>
.holder {width:250px; height:250px; background:#069; position:relative; margin:0; border-radius:5px; box-shadow:0 10px 8px -10px rgba(0,0,0,0.8);
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
background-image: -ms-linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
}
.holder input {position:absolute; left:-9999px;;}
#driller {width:250px; height:250px; position:relative;}
#driller dl {width:250px; height:250px; position:absolute; padding:0; margin:0; top:0; left:0; opacity:0; z-index:-1;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
#driller dl dt {color:#fff; padding:5px 10px; height:40px; font:normal 11px/20px verdana, arial, sans-serif;}
#driller dl dt label {color:#ff0; cursor:pointer; position:relative;}
#driller dl dd {padding:0; margin:0; padding:5px 10px; font:normal 12px/25px verdana, arial, sans-serif;}
#driller dl dd a {display:block; text-decoration:none; color:#666; border-bottom:1px solid #eee; background:#fff; text-indent:14px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#driller dl dd label.sub {display:block; border-bottom:1px solid #eee; text-indent:5px; color:#000; background:#fff; cursor:pointer; position:relative;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#driller dl dd a:last-child,#driller dl dd label.sub:last-child {border-bottom:0;}
#driller dl dd a:first-child,
#driller dl dd label.sub:first-child {box-shadow: inset 0 7px 4px -5px rgba(0,0,0,0.7);}
#driller dl dd label.sub:hover,
#driller dl a:hover {background:#069; color:#fff;
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
#driller dl dd.links {max-height:200px; overflow:auto;}
#driller dl dd.back {position:absolute; left:0; bottom:0; width:230px; text-align:right;}
#driller dl dd.back label {color:#ff0; border:0; background:transparent; font:normal 11px/25px verdana, arial, sans-serif; box-shadow:none;}
#driller label img {display:block; width:100%; height:100%; position:absolute; left:0; top:0;}
#home:checked ~ #driller .dl1,
#contacts:checked ~ #driller .dl2,
#resort:checked ~ #driller .dl3,
#area:checked ~ #driller .dl4,
#inform:checked ~ #driller .dl5,
#slopes:checked ~ #driller .dl6,
#restaurants:checked ~ #driller .dl7,
#hire:checked ~ #driller .dl8,
#skill:checked ~ #driller .dl9,
#essential:checked ~ #driller .dl10,
#language:checked ~ #driller .dl11,
#rental:checked ~ #driller .dl12 {opacity:1; z-index:100;}
</style>
<div class="holder">
<input type="radio" name="pop" id="home" class="pop" checked="checked" />
<input type="radio" name="pop" id="contacts" class="pop" />
<input type="radio" name="pop" id="resort" class="pop" />
<input type="radio" name="pop" id="area" class="pop" />
<input type="radio" name="pop" id="inform" class="pop" />
<input type="radio" name="pop" id="slopes" class="pop" />
<input type="radio" name="pop" id="restaurants" class="pop" />
<input type="radio" name="pop" id="hire" class="pop" />
<input type="radio" name="pop" id="skill" class="pop" />
<input type="radio" name="pop" id="essential" class="pop" />
<input type="radio" name="pop" id="language" class="pop" />
<input type="radio" name="pop" id="rental" class="pop" />
<div id="driller">
<dl class="dl1">
<dt>Home</dt>
<dd class="links">
<label class="sub" for="contacts">► Contact Us<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<label class="sub" for="resort">► Resort<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<label class="sub" for="area">► Surrounding Area<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<label class="sub" for="inform">► Information<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<a href="index.html">Privacy</a>
</dd>
</dl>
<dl class="dl2">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► Contact Us</dt>
<dd class="links">
<a href="#url">Email</a>
<a href="#url">Telephone</a>
<a href="#url">Online Form</a>
<a href="#url">Snail Mail Address</a>
</dd>
<dd class="back"><label for="home">◄ Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl3">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► Resort</dt>
<dd class="links">
<a href="#url">Ski Hire Facilities</a>
<label class="sub" for="slopes">► Main Ski Slopes<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<a href="#url">Night Life</a>
<label class="sub" for="restaurants">► Restaurants<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<label class="sub" for="hire">► Car Hire<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<a href="#url">Shopping</a>
</dd>
<dd class="back"><label for="home">◄ Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl4">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► Surrounding Area</dt>
<dd class="links">
<a href="#url">Where to go</a>
<a href="#url">What to do</a>
<a href="#url">Places of interest</a>
<a href="#url">National parks & Museums</a>
</dd>
<dd class="back"><label for="home">◄ Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl5">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► Information</dt>
<dd class="links">
<a href="#url">Money Exchange</a>
<label class="sub" for="essential">► Resort Essential Information<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<label class="sub" for="language">► Language<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<a href="#url">Short Breaks</a>
</dd>
<dd class="back"><label for="home">◄ Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl6">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► <label for="resort">Resort<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► Main Ski Slopes</dt>
<dd class="links">
<a href="#url">Beginners Slopes</a>
<a href="#url">Intermediate Slopes</a>
<label class="sub" for="skill">► Advanced Skill Levels<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<a href="#url">Expert</a>
</dd>
<dd class="back"><label for="resort">◄ Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl7">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► <label for="resort">Resort<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► Restaurants</dt>
<dd class="links">
<a href="#url">Snow Hotel</a>
<a href="#url">The Snowman</a>
<a href="#url">Ice Cavern</a>
<a href="#url">Ski Inn</a>
</dd>
<dd class="back"><label for="resort">◄ Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl8">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► <label for="resort">Resort<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► Car Hire</dt>
<dd class="links">
<a href="#url">From Airport</a>
<a href="#url">In Resort</a>
<a href="#url">Multiple Resorts</a>
</dd>
<dd class="back"><label for="resort">◄ Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl9">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► <label for="resort">Resort<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► <label for="slopes">Main Ski Slopes<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► Advanced Skill Levels</dt>
<dd class="links">
<a href="#url">Local</a>
<a href="#url">Nearby</a>
<a href="#url">With instructor</a>
<a href="#url">Snow boarding</a>
</dd>
<dd class="back"><label for="slopes">◄ Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl10">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► <label for="inform">information<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► Resort Essential Information</dt>
<dd class="links">
<a href="#url">Lift Passes</a>
<a href="#url">Insurance</a>
<label class="sub" for="rental">► Gear Rental<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<a href="#url">Ski Schools</a>
<a href="#url">Snow Report</a>
</dd>
<dd class="back"><label for="inform">◄ Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl11">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► <label for="inform">Information<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► Language</dt>
<dd class="links">
<a href="#url">Austrian</a>
<a href="#url">German</a>
<a href="#url">French</a>
<a href="#url">English</a>
</dd>
<dd class="back"><label for="inform">◄ Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl12">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► <label for="inform">information<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► <label for="essential">Resort Essential Information<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> ► Gear Rental</dt>
<dd class="links">
<a href="#url">Boots</a>
<a href="#url">Skis</a>
<a href="#url">Ski Wear</a>
<a href="#url">Goggles</a>
</dd>
<dd class="back"><label for="essential">◄ Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
</div>
</div>