<style>
.camera {display:block; float:left; margin-right:20px;}
ul.top-ul, ul.top-ul ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:#fff;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
}
ul.top-ul {width:100px; height:30px; border:1px solid #888; position:relative; z-index:100; margin-left:70px;
-o-border-radius: 5px 5px 0 0;
-icab-border-radius: 5px 5px 0 0;
-khtml-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
ul.top-ul li.top-li {width:100px; height:30px; float:left; position:relative;}
ul.top-ul li.top-li a.top-a {display:block; width:100px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; 
font-size:13px; font-weight:bold;}

ul.top-ul li.top-li div.drop {height:0; overflow:hidden; left:-1px; top:30px; width:520px; position:absolute; z-index:500;
transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-webkit-transition: height 1s ease-in-out;
}
ul.top-ul li.top-li div.drop em {display:block; width:510px; height:510px; background:#f8f8f8; opacity:0.8; filter: alpha(opacity=80);
border:1px solid #ddd;
-o-border-radius: 0 5px 5px 5px;
-icab-border-radius: 0 5px 5px 5px;
-khtml-border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px  rgba(0, 0, 0, 0.5);
}
ul.top-ul li.top-li div.drop ul.drop-ul {position:absolute; left:0; top:-500px; border:1px solid #888; border-top:0; padding-bottom:10px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-border-radius: 0 0 5px 5px;
-icab-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
ul.top-ul li.top-li div.drop ul.drop-ul li.drop-li {position:relative; width:100px; height:100px; float:left; z-index:100;}
ul.top-ul li.top-li div.drop ul.drop-ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}
ul.top-ul li.top-li div.drop ul.drop-ul li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; 
opacity:1; filter: alpha(opacity=100);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
ul.top-ul li.top-li div.drop ul.drop-ul li.drop-li a b {display:block; width:100px; height:60px; padding-top:40px; text-align:center; 
background:url(trans.gif); cursor:pointer; color:#000; font-size:16px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
ul.top-ul li.top-li:hover div.drop ul.drop-ul li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
ul.top-ul li.top-li:hover div.drop ul.drop-ul li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}
ul.top-ul li.top-li:hover div.drop {height:522px;}
ul.top-ul li.top-li:hover div.drop:hover {height:522px;}
ul.top-ul li.top-li:hover div.drop ul.drop-ul {top:0;}
ul.top-ul li.top-li div.drop ul.drop-ul div.fly {position:absolute; left:100px; top:-1px; width:0; height:113px; overflow:hidden;
transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
}
ul.top-ul li.top-li div.drop ul.drop-ul div.fly ul.fly-ul {position:absolute; left:-500px; top:1px; width:400px; height:100px; border:1px solid #888; 
border-left:0; padding-right:10px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-border-radius: 0 5px 5px 0;
-icab-border-radius: 0 5px 5px 0;
-khtml-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
ul.top-ul li.top-li div.drop ul.drop-ul div.fly ul.two {width:200px; left:-310px;
transition: 0.6s ease-in-out;
-o-transition: 0.6s ease-in-out;
-moz-transition: 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
}
ul.top-ul li.top-li div.drop ul.drop-ul div.fly ul.three {width:300px; left:-410px;
transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
}
ul.top-ul li.top-li div.drop ul.drop-ul div.fly ul.fly-ul li.fly-li {float:left; position:relative; background:#fff; height:100px; z-index:100;}
ul.top-ul li.top-li div.drop ul.drop-ul div.fly ul.fly-ul li.fly-li a.fly-a {display:block; width:100px; height:100px; float:left; text-decoration:none;}
ul.top-ul li.top-li div.drop ul.drop-ul div.fly ul.fly-ul li.fly-li a.fly-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; 
opacity:1; filter: alpha(opacity=100);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
ul.top-ul li.top-li div.drop ul.drop-ul div.fly ul.fly-ul li.fly-li a.fly-a b {display:block; height:65px; text-align:center; color:#000; font-size:12px; 
padding-top:35px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
ul.top-ul li.top-li:hover div.drop ul.drop-ul li.drop-li:hover div.fly {width:415px;}
ul.top-ul li.top-li:hover div.drop ul.drop-ul li.drop-li:hover div.fly ul.fly-ul {left:0;}
ul.top-ul li.top-li:hover div.drop ul.drop-ul li.drop-li:hover div.fly ul.fly-ul li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
ul.top-ul li.top-li:hover div.drop ul.drop-ul li.drop-li:hover div.fly ul.fly-ul li:hover > a b {opacity:1; filter: alpha(opacity=100);}
/* for IE6 */
ul.top-ul li.top-li a:hover {direction:ltr;}
ul.top-ul li.top-li a:hover div.drop {height:522px;}
ul.top-ul li.top-li a:hover div.drop ul.drop-ul {top:0;}
ul.top-ul li.top-li div.drop ul.drop-ul li.drop-li a:hover img {filter: alpha(opacity=50);}
ul.top-ul li.top-li div.drop ul.drop-ul li.drop-li a:hover b {filter: alpha(opacity=100);}
ul.top-ul li.top-li a:hover div.drop ul.drop-ul li.drop-li a:hover div.fly {width:415px;}
ul.top-ul li.top-li a:hover div.drop ul.drop-ul li.drop-li a:hover div.fly ul.fly-ul {left:0;}
ul.top-ul li.top-li a:hover div.drop ul.drop-ul li.drop-li a:hover div.fly ul.fly-ul li a:hover img {filter: alpha(opacity=50);}
ul.top-ul li.top-li a:hover div.drop ul.drop-ul li.drop-li a:hover div.fly ul.fly-ul li a:hover b {filter: alpha(opacity=100);}
ul.top-ul table {border-collapse:collapse; position:absolute; left:0; top:0; width:0; height:0; margin-bottom:-1px;}
</style>
<ul class ="top-ul">
<li class ="top-li"><a class ="top-a" href="#url">Cameras<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class ="drop"><em></em>
<ul class ="drop-ul">
<li class ="drop-li"><a class ="drop-a" href="#url"><img src="canon.jpg" alt=""><b>Canon</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class ="fly">
<ul class ="fly-ul">
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="canonefs10-22.jpg" alt=""><b>EF-S 10-22<br>Zoom</b></a></li>
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="canonefs18-200.jpg" alt=""><b>EF-S 18-200<br>Zoom</b></a></li>
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="canonefs55-250.jpg" alt=""><b>EF-S 55-250<br>Zoom</b></a></li>
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="canonefs60macro.jpg" alt=""><b>EF-S 60<br>Macro</b></a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class ="drop-li"><a class ="drop-a" href="#url"><img src="nikon.jpg" alt=""><b>Nikon</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class ="fly">
<ul class ="fly-ul">
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="nikkor18-105.jpg" alt=""><b>Nikkor 18-105<br>Zoom</b></a></li>
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="nikkor18-200.jpg" alt=""><b>Nikkor 18-200<br>Zoom</b></a></li>
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="nikkor55-200.jpg" alt=""><b>Nikkor 55-200<br>Zoom</b></a></li>
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="nikkor105-macro.jpg" alt=""><b>Nikkor 105<br>Macro</b></a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class ="drop-li"><a class ="drop-a" href="#url"><img src="panasonic.jpg" alt=""><b>Panasonic</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class ="fly">
<ul class ="fly-ul three">
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="lumix7-14.jpg" alt=""><b>Lumix 7-14<br>Zoom</b></a></li>
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="lumix14-140.jpg" alt=""><b>Lumix 14-140<br>Zoom</b></a></li>
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="lumix45-200.jpg" alt=""><b>Lumix 45-200<br>Zoom</b></a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class ="drop-li"><a class ="drop-a" href="#url"><img src="sony.jpg" alt=""><b>Sony</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]--><div class ="fly">
<ul class ="fly-ul two">
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="sal18-250.jpg" alt=""><b>SAL 18-250<br>Zoom</b></a></li>
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="sal50.jpg" alt=""><b>SAL 50<br>Fixed</b></a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class ="drop-li"><a class ="drop-a" href="#url"><img src="olympus.jpg" alt=""><b>Olympus</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class ="fly">
<ul class ="fly-ul">
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="zuiko-9.jpg" alt=""><b>Zuiko 9mm<br>Wide angle</b></a></li>
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="zuiko12-60.jpg" alt=""><b>Zuiko 12-60<br>Zoom</b></a></li>
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="zuiko14-150.jpg" alt=""><b>Zuiko 14-150<br>Zoom</b></a></li>
<li class ="fly-li"><a class ="fly-a" href="#url"><img src="zuiko40-150.jpg" alt=""><b>Zuiko 40-150<br>Zoom</b></a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<img src="eos500d.jpg" alt="Canon EOS500D" class ="camera">
<p class ="info">A digital camera (also digicam or camera for short) is a
 camera  that takes video  or still photographs, or both, digitally  by 
recording images via an electronic image sensor.</p>
<p class ="info">Many compact digital still cameras can record sound and 
moving video as well as still photographs. Most 21st century cameras are
 digital.</p>
<p class ="info">Digital cameras can do things film cameras cannot: 
displaying images on a screen immediately after they are recorded, 
storing thousands of images on a single small memory device, recording 
video with sound, and deleting images to free storage space. Some can 
crop pictures and perform other elementary image editing. The optical 
system works the same as in film cameras, typically using a lens with a 
variable diaphragm to focus light onto an image pickup device. The 
diaphragm and shutter admit the correct amount of light to the imager, 
just as with film but the image pickup device is electronic rather than 
chemical.</p>
<p class ="info">Digital cameras are incorporated into many devices 
ranging from PDAs and mobile phones (called camera phones) to vehicles. 
The Hubble Space Telescope and other astronomical devices are 
essentially specialized digital cameras.</p>
<br><br><br><br><br><br>