<\/p>\n
jQuery\u3067\u3001\u7c21\u5358\u306b\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n
<\/p>\n
\u2193\u4ee5\u4e0b\u304c\u5b9f\u969b\u306e\u30bd\u30fc\u30b9\u30b5\u30f3\u30d7\u30eb\u3067\u3059\u3002<\/p>\n
\u25bcJavaScript<\/p>\n
<script type=\"text\/javascript\" src=\"js\/jquery-1.4.2.min.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n\t$(function(){\r\n\t\t$(\"ul.menu li\").hover(function(){\r\n\t\t\t$(\"ul.sub:not(:animated)\", this).slideDown();\r\n\t\t}, function(){\r\n\t\t\t$(\"ul.sub\",this).slideUp();\r\n\t\t});\r\n\t});\r\n<\/script>\r\n<\/pre>\n\u25bcCSS<\/p>\n
<style type=\"text\/css\">\r\nul {\r\n\tlist-style-type: none;\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tcolor: #fff;\r\n}\r\nul.menu li {\r\n\tfloat: left;\r\n\tposition: relative;\r\n\tmargin: 0 0 0 1px;\r\n\tpadding: 5px;\r\n\twidth: 200px;\r\n\tbackground-color: #555555;\r\n\tdisplay: block;\r\n}\r\nul.sub {\r\n\tdisplay: none;\r\n\tposition: absolute;\r\n\tmargin-left: -6px;\r\n\tpadding: 0;\r\n}\r\nul.sub li a {\r\n\tpadding: 5px 10px;\r\n\tmargin-left: -5px;\r\n\tmargin-right: -5px;\r\n\tmargin-bottom: -5px;\r\n\tdisplay: block;\r\n\tcolor: #fff;\r\n}\r\nul.sub li a:hover {\r\n\tbackground: #ff9900;\r\n\ttext-decoration:none;\r\n}\r\n<\/style>\r\n<\/pre>\n\u25bcHTML<\/p>\n
<ul class=\"menu\">\r\n <li>MENU 1<\/li>\r\n <li>MENU 2\r\n <ul class=\"sub\">\r\n <li><a href=\"#\">MENU 2-1<\/a><\/li>\r\n <li><a href=\"#\">MENU 2-2<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li>MENU 3\r\n <ul class=\"sub\">\r\n <li><a href=\"#\">MENU 3-1<\/a><\/li>\r\n <li><a href=\"#\">MENU 3-2<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li>MENU 4\r\n <ul class=\"sub\">\r\n <li><a href=\"#\">MENU 4-1<\/a><\/li>\r\n <li><a href=\"#\">MENU 4-2<\/a><\/li>\r\n <li><a href=\"#\">MENU 4-3<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n<\/ul>\r\n<\/pre>\n\u4eca\u56de\u3001\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u306e\u306f\u3001
\n\u300e\u8ab0\u3067\u3082\u51fa\u6765\u308b\uff01jQuery\u3067\u30c9\u30ed\u30c3\u30d7\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc\u3092\u308f\u305a\u304b7\u884c\u3067\u5b8c\u6210\u3055\u305b\u308b\u65b9\u6cd5<\/a>\u300f\u3055\u3093\u3067\u3059\u3002
\n\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002<\/p>\n