글 수 '48'
| <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> <head> <title>Simple Drop Down Menu</title> <script src="http://jquery.com/src/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#nav li').hover( function () { //show its submenu $('ul', this).slideDown(500); }, function () { //hide its submenu $('ul', this).slideUp(500); } ) }); </script> <style type="text/css"> body {font-family:arial; font-size:11px;} #nav {margin:0; padding:0; list-style:none;} #nav li {float:left; display:block; width:100px; background:#000; position:relative; z-index:500; margin:0 1px;} #nav li a {display:block; padding:8px 5px 0 5px; font-weight:700; height:23px; text-decoration:none; color:#fff; text-align:center;} #nav li a:hover {color:#fff;} #nav a.selected {color:#2896F0;} #nav ul {position:absolute; left:0; display:none; margin:0 0 0 -1px; padding:0; list-style:none;} #nav ul li {width:100px; float:left; border-top:1px solid #ddd;} #nav ul a {display:block; height:15px; padding:5px; color:#999;} #nav ul a:hover {text-decoration:underline;} *html #nav ul {margin:0 0 0 -2px;} </style> </head> <body> <ul id="nav"> <li><a href="#">Parent 01</a></li> <li><a href="#" class="selected">Parent 02 > </a> <ul> <li><a href="#">Item 01</a></li> <li><a href="#" class="selected">Item 02</a></li> <li><a href="#">Item 03</a></li> </ul> <div class="clear"></div> </li> <li><a href="#">Parent 03 > </a> <ul> <li><a href="#">Item 04</a></li> <li><a href="#">Item 05</a></li> <li><a href="#">Item 06</a></li> <li><a href="#">Item 07</a></li> </ul> <div class="clear"></div> </li> <li><a href="#">Parent 04</a></li> </ul> <div class="clear"></div> </body> </html> |
Copyrights 2010 ,WebMake.ca . All rights reserved