<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#abc").mouseover(function(){ $("#ddd").toggle(1000); }); }); $(document).ready(function(){ $("#abc").mouseout(function(){ $("#ddd").toggle(1000); }); }); </script> <style type = "text/css"> #ddd{ display:none; } </style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> stu nicholls dot com | menu - hover drop #2 </title> <meta name="Author" content="Stu Nicholls" /> <link rel="stylesheet" media="all" type="text/css" href="hover_drop_2/hover_drop_2.css" /> <script src="hover_drop_2/iefix.js" type="text/javascript"></script> </head> <body onload="ieFix('menu')"> <h1>stunicholls.com</h1> <h2>Horizontal drop/fly</h2> <h3>3rd November 2007</h3> <div id="outer"> <div class="pad1"></div> <ul id="menu"> <li><a href="#nogo1">Home</a></li> <li class="sub"><a href="#nogo2">Products</a> <ul> <li class="sub"><a href="#nogo3">Cameras</a> <ul class="left"> <li><a href="#nogo4">Nikon</a></li> <li><a href="#nogo5">Minolta</a></li> <li><a href="#nogo6">Pentax</a></li> </ul> </li> <li class="sub"><a href="#nogo7">Lenses </a> <ul> <li><a href="#nogo8">Wide Angle</a></li> <li><a href="#nogo9">Standard</a></li> <li><a href="#nogo10">Telephoto</a></li> <li class="sub"><a href="#nogo11">Zoom</a> <ul> <li><a href="#nogo12">35mm to 125mm</a></li> <li><a href="#nogo13">50mm to 250mm</a></li> <li><a href="#nogo14">125mm to 500mm</a></li> </ul> </li> <li><a href="#nogo15">Mirror</a></li> <li class="sub"><a href="#nogo16">Non-standard</a> <ul class="left"> <li><a href="#nogo17">Bayonet mount</a></li> <li><a href="#nogo18">Screw mount</a></li> </ul> </li> </ul> </li> <li><a href="#nogo19">Flash Guns</a></li> <li><a href="#nogo20">Tripods</a></li> <li><a href="#nogo21">Filters</a></li> </ul> </li> <li class="sub"><a href="#nogo22">Services</a> <ul> <li><a href="#nogo23">Printing</a></li> <li><a href="#nogo24">Photo Framing</a></li> <li><a href="#nogo25">Retouching</a></li> <li><a href="#nogo26">Archiving</a></li> </ul> </li> <li class="sub"><a href="#nogo27">Shop</a> <ul> <li><a href="#nogo28">Online</a></li> <li><a href="#nogo29">Catalogue</a></li> <li><a href="#nogo30">Mail Order</a></li> </ul> </li> <li class="sub"><a href="#nogo31">Contacts</a> <ul> <li><a href="#nogo32">Support</a></li> <li class="sub"><a href="#nogo33">Sales</a> <ul class="left"> <li><a href="#nogo34">USA</a></li> <li><a href="#nogo35">Canadian</a></li> <li><a href="#nogo36">South American</a></li> <li class="sub"><a href="#nogo37">European</a> <ul class="left"> <li><a href="#nogo38">British</a></li> <li><a href="#nogo39">French</a></li> <li><a href="#nogo40">German</a></li> <li><a href="#nogo41">Spanish</a></li> <li><a href="#nogo42">Italian</a></li> </ul> </li> <li><a href="#nogo43">Canadian</a></li> <li><a href="#nogo44">Asian</a></li> </ul> </li> <li><a href="#nogo45">Buying</a></li> <li><a href="#nogo46">Photographers</a></li> <li><a href="#nogo47">Stockist</a></li> <li><a href="#nogo48">General</a></li> </ul> </li> </ul> <div class="pad2"></div> </div> <p>© 2007 stunicholls.com</p> </body> </html>
#outer {width:750px; height:300px; background:url(film.jpg) no-repeat right bottom; border:1px solid #766; border-width:5px 1px 1px; position:relative;} .pad1 {width:50px; height:25px; background:#baa; display:inline; float:left; margin:3px 3px 0 3px;} .pad2 {width:50px; height:25px; background:#baa; display:inline; float:left; margin:3px 3px 0 0;} #menu {list-style-type:none; padding:0; margin:0;} #menu ul {list-style-type:none; padding:0; margin:0;} #menu li {float:left; background:#dcc; margin:3px 3px 0 0; position:relative;} #menu li.sub {background:#baa;} /* for IE5.5 and IE6 only */ #menu table {border-collapse:collapse;position:absolute;top:0;left:0;z-index:80;font-size:1em;} #menu li a {display:block; color:#000; height:25px; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none; text-align:center;} #menu :hover {color:#ee0; background:#988;} #menu :hover > a {color:#ee0; background:#988;} #menu ul, #menu :hover ul ul, #menu :hover ul :hover ul ul, #menu :hover ul :hover ul ul.left {position:absolute; left:-9999px; width:128px;} #menu :hover ul{left:0;top:25px; background:url(transparent.gif);} /* the background image is for IE7 */ #menu :hover ul :hover ul, #menu :hover ul :hover ul :hover ul {padding:0 3px; left:125px; top:-3px;} #menu :hover ul :hover ul.left, #menu :hover ul :hover ul :hover ul.left {padding:0 3px; left:-131px; top:-3px;}
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
