{"id":304,"date":"2013-11-04T04:07:00","date_gmt":"2013-11-04T04:07:00","guid":{"rendered":"https:\/\/kiencang.net\/2013\/11\/04\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/"},"modified":"2013-11-04T04:07:00","modified_gmt":"2013-11-04T04:07:00","slug":"huong-dan-tao-menu-xo-bang-code-css-don-gian","status":"publish","type":"post","link":"https:\/\/kiencang.net\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn t\u1ea1o Menu x\u1ed5 b\u1eb1ng code CSS \u0111\u01a1n gi\u1ea3n"},"content":{"rendered":"\n<p>Menu x\u1ed5 l\u00e0 m\u1ed9t trong nh\u1eefng th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n nh\u1ea5t cho m\u1ecdi trang web c\u00f3 nhi\u1ec1u \u0111i\u1ec1u h\u01b0\u1edbng \u2013 c\u00e1i m\u00e0 menu th\u01b0\u1eddng theo ki\u1ec3u d\u00e0n tr\u1ea3i t\u1ea5t c\u1ea3 kh\u00f4ng th\u1ec3 thay th\u1ebf \u0111\u01b0\u1ee3c v\u00ec chi\u1ebfm qu\u00e1 nhi\u1ec1u di\u1ec7n t\u00edch.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/images-blogger-opensocial.googleusercontent.com\/gadgets\/proxy?url=http%3A%2F%2F3.bp.blogspot.com%2F-qG7Nlq-QBkU%2FUncciWIGQsI%2FAAAAAAAAC0A%2F0157aQlp0iM%2Fs1600%2Fmenu-xo.png&amp;container=blogger&amp;gadget=a&amp;rewriteMime=image%2F*\"><img decoding=\"async\" src=\"https:\/\/images-blogger-opensocial.googleusercontent.com\/gadgets\/proxy?url=http%3A%2F%2F3.bp.blogspot.com%2F-qG7Nlq-QBkU%2FUncciWIGQsI%2FAAAAAAAAC0A%2F0157aQlp0iM%2Fs1600%2Fmenu-xo.png&amp;container=blogger&amp;gadget=a&amp;rewriteMime=image%2F*\" alt=\"Menu x\u1ed5\" title=\"Menu x\u1ed5\"\/><\/a><\/figure><\/div>\n\n\n\n<p>H\u00f4m nay t\u00f4i v\u00e0 b\u1ea1n s\u1ebd c\u00f9ng th\u1ef1c h\u00e0nh t\u1ea1o menu x\u1ed5, ti\u1ebfng Anh l\u00e0 dropdown menu, ch\u00fang ta s\u1ebd code ho\u00e0n to\u00e0n b\u1eb1ng CSS ch\u1ee9 kh\u00f4ng c\u1ea7n Javascript, ngo\u00e0i ra c\u0169ng ch\u00fa \u00fd \u0111\u1ec3 vi\u1ebft code sao cho \u0111\u01a1n gi\u1ea3n nh\u1ea5t c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c m\u00e0 v\u1eabn t\u1ea1o ra hi\u1ec7u qu\u1ea3 t\u01b0\u01a1ng t\u1ef1.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >M\u1ee5c l\u1ee5c<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-6577d68f47977\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-6577d68f47977\"  type=\"checkbox\" id=\"item-6577d68f47977\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/kiencang.net\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/#1_Tao_ma_HTML_cho_menu\" title=\"#1. T\u1ea1o m\u00e3 HTML cho menu\">#1. T\u1ea1o m\u00e3 HTML cho menu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/kiencang.net\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/#2_Tao_Style_cho_Menu\" title=\"#2. T\u1ea1o Style cho Menu\">#2. T\u1ea1o Style cho Menu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/kiencang.net\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/#3_An_di_Sub_Menu\" title=\"#3. \u1ea8n \u0111i Sub Menu\">#3. \u1ea8n \u0111i Sub Menu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/kiencang.net\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/#4_Hover_qua_thi_lam_xuat_hien_Sub_Menu\" title=\"#4. Hover qua th\u00ec l\u00e0m xu\u1ea5t hi\u1ec7n Sub Menu\">#4. Hover qua th\u00ec l\u00e0m xu\u1ea5t hi\u1ec7n Sub Menu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/kiencang.net\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/#Tong_ket_doan_code_mau_CSS\" title=\"T\u1ed5ng k\u1ebft, \u0111o\u1ea1n code m\u1eabu CSS\">T\u1ed5ng k\u1ebft, \u0111o\u1ea1n code m\u1eabu CSS<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Tao_ma_HTML_cho_menu\"><\/span>#1. T\u1ea1o m\u00e3 HTML cho menu<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Menu s\u1eed d\u1ee5ng danh s\u00e1ch kh\u00f4ng c\u00f3 th\u1ee9 t\u1ef1, t\u1ee9c l\u00e0\u00a0<a href=\"https:\/\/kiencang.net\/the-ul-ol-li-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">th\u1ebb ul v\u00e0 li<\/a>. C\u1ee5 th\u1ec3 m\u00e3 s\u1ebd ki\u1ec3u nh\u01b0 n\u00e0y:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ul id=\"menu\">\n&lt;li>&lt;a href=\"#\">Menu 1&lt;\/a>&lt;\/li>\n&lt;li>&lt;a href=\"#\">Menu 2&lt;\/a>\n&lt;ul id=\"sub\">             \n&lt;li>&lt;a href=\"#\">Sub Menu 1&lt;\/a>&lt;\/li>\n&lt;li>&lt;a href=\"#\">Sub Menu 2&lt;\/a>&lt;\/li>\n&lt;li>&lt;a href=\"#\">Sub Menu 3&lt;\/a>&lt;\/li>\n&lt;\/ul>\n&lt;\/li>\n&lt;li>&lt;a href=\"#\">Menu 3&lt;\/a>&lt;\/li>\n&lt;li>&lt;a href=\"#\">Menu 4&lt;\/a>&lt;\/li>\n&lt;li>&lt;a href=\"#\">Menu 5&lt;\/a>&lt;\/li>\n&lt;\/ul><\/code><\/pre>\n\n\n\n<p>B\u1ea1n c\u00f3 th\u1ec3 th\u1ea5y, Menu 2 ch\u00ednh l\u00e0 c\u00e1i x\u1ed5 ra, nh\u1eefng menu c\u00f2n l\u1ea1i l\u00e0 th\u01b0\u1eddng. K\u1ebft qu\u1ea3 c\u1ee7a \u0111o\u1ea1n code tr\u00ean s\u1ebd nh\u01b0 d\u01b0\u1edbi \u0111\u00e2y, v\u00ec b\u1ea1n ch\u01b0a CSS g\u00ec c\u1ea3 n\u00ean ch\u00fang ta ch\u01b0a c\u00f3 hi\u1ec7u \u1ee9ng n\u00e0o.<\/p>\n\n\n\n<ul><li>Menu 1<\/li><li>Menu 2<ul><li>Sub Menu 1<\/li><li>Sub Menu 2<\/li><li>Sub Menu 3<\/li><\/ul><\/li><li>Menu 3<\/li><li>Menu 4<\/li><li>Menu 5<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Tao_Style_cho_Menu\"><\/span>#2. T\u1ea1o Style cho Menu<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u1ebfn b\u01b0\u1edbc n\u00e0y ta m\u1edbi b\u1eaft \u0111\u1ea7u d\u00f9ng CSS, tr\u01b0\u1edbc ti\u00ean ch\u00fang ta b\u1ecf m\u1ea5y d\u1ea5u ch\u1ea5m tr\u00f2n v\u00e0 cho menu d\u00e0n h\u00e0ng ngang. Code CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ul#menu li {\nlist-style-type: none; \/* code n\u00e0y \u0111\u1ec3 b\u1ecf c\u00e1c d\u1ea5u ch\u1ea5m tr\u00f2n*\/\nfloat: left; \/* code n\u00e0y \u0111\u1ec3 menu d\u00e0n h\u00e0ng ngang*\/\nmargin-right: 10px; \/* t\u1ea1o l\u1ec1 cho c\u00e1c menu*\/\n}<\/code><\/pre>\n\n\n\n<p>\u0110\u1ec3 trang tr\u00ed \u0111\u01a1n gi\u1ea3n cho menu t\u00f4i th\u00eam \u0111o\u1ea1n css:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ul#menu li a {\ntext-decoration:none;\nbackground-color:#900;\npadding: 5px;\ncolor:white;\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_An_di_Sub_Menu\"><\/span>#3. \u1ea8n \u0111i Sub Menu<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>C\u00e1c Sub Menu 1 cho \u0111\u1ebfn Sub Menu 3 s\u1ebd b\u1ecb \u1ea9n \u0111i, v\u00ec ch\u00fang ch\u1ec9 hi\u1ec7n ra khi \u0111\u01b0\u1ee3c hover qua Menu 2. Ch\u00fang ta s\u1eed d\u1ee5ng\u00a0<a href=\"https:\/\/kiencang.net\/cach-dung-thuoc-tinh-display-trong-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">thu\u1ed9c t\u00ednh display<\/a>\u00a0\u0111\u1ec3 l\u00e0m \u1ea9n c\u00e1c sub menu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ul#menu li ul#sub {display: none;}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Hover_qua_thi_lam_xuat_hien_Sub_Menu\"><\/span>#4. Hover qua th\u00ec l\u00e0m xu\u1ea5t hi\u1ec7n Sub Menu<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u0110\u1ec3 hover qua Menu th\u00ec c\u00e1c submenu xu\u1ea5t hi\u1ec7n ta s\u1eed d\u1ee5ng \u0111o\u1ea1n CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ul#menu li:hover ul#sub {display: block;}<\/code><\/pre>\n\n\n\n<p>Nh\u01b0ng b\u1ea1n s\u1ebd th\u1ea5y c\u00e1c submenu xu\u1ea5t hi\u1ec7n chi\u1ebfm kh\u00f4ng gian v\u00e0 l\u00e0m x\u00ea d\u1ecbch c\u00e1c menu cha. \u0110\u1ec3 tr\u00e1nh \u0111i\u1ec1u n\u00e0y ta ph\u1ea3i \u0111\u1ec3\u00a0<a href=\"https:\/\/kiencang.net\/thuoc-tinh-position-trong-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">thu\u1ed9c t\u00ednh\u00a0position<\/a>\u00a0c\u1ee7a submenu l\u00e0\u00a0<em>absolute<\/em>, v\u00e0 menu cha l\u00e0\u00a0<em>relative<\/em>, code m\u1eabu:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ul#menu li {positon: relative;} \nul#menu li ul#sub {display: none;position: absolute;width: 100px;}<\/code><\/pre>\n\n\n\n<p>C\u00e1i\u00a0<em><code>width: 100px<\/code><\/em>\u00a0l\u00e0 t\u00f9y ch\u1ecdn, m\u1ee5c \u0111\u00edch \u0111\u1ec3 submenu d\u00e0n theo h\u00e0ng d\u1ecdc, n\u1ebfu kh\u00f4ng c\u00f3, n\u00f3 s\u1ebd d\u00e0n theo h\u00e0ng ngang, t\u00f9y theo \u0111\u1ed9 l\u1edbn c\u1ee7a submenu m\u00e0 b\u1ea1n \u0111i\u1ec1u ch\u1ec9nh gi\u00e1 tr\u1ecb n\u00e0y sao cho ph\u00f9 h\u1ee3p \u0111\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c k\u1ebft qu\u1ea3 v\u1eeba m\u1eaft.<\/p>\n\n\n\n<p>Mu\u1ed1n submenu hi\u1ec7n ngay ng\u1eafn h\u00e0ng l\u1ed1i v\u1edbi menu \u0111\u01b0\u1ee3c hover ta th\u00eam \u0111o\u1ea1n code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ul#menu, ul#menu ul#sub {padding:0;margin: 0;}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tong_ket_doan_code_mau_CSS\"><\/span>T\u1ed5ng k\u1ebft, \u0111o\u1ea1n code m\u1eabu CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>D\u01b0\u1edbi \u0111\u00e2y l\u00e0 t\u1ed5ng h\u1ee3p t\u1ea5t c\u1ea3 c\u00e1c CSS \u1edf tr\u00ean, n\u00f3 hi\u1ec7n \u0111\u00e3 \u0111\u1ee7 \u0111\u1ec3 l\u00e0m menu x\u1ed5, d\u0129 nhi\u00ean \u0111\u1ec3 \u0111\u1eb9p h\u01a1n b\u1ea1n c\u1ea7n t\u1ef1 tinh ch\u1ec9nh th\u00eam CSS cho b\u1ea3n th\u00e2n.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>ul#menu, ul#menu ul#sub {\n    padding:0;\n    margin: 0;\n}\nul#menu li {\n     list-style-type: none;    \/* code n\u00e0y \u0111\u1ec3 b\u1ecf c\u00e1c d\u1ea5u ch\u1ea5m tr\u00f2n*\/\n     float: left;    \/* code n\u00e0y \u0111\u1ec3 menu d\u00e0n h\u00e0ng ngang*\/\n     margin-right: 10px;    \/* t\u1ea1o l\u1ec1 cho c\u00e1c menu*\/\n}\nul#menu li a {\ntext-decoration: none;\nbackground-color: #900;\npadding: 5px;\ncolor: white;\n}\nul#menu li {\npositon: relative;\n}\nul#menu li ul#sub {\ndisplay: none;\nposition: absolute;\nwidth: 100px;\n}\nul#menu li ul#sub li {\nmargin-top: 10px;\nmargin-bottom: 5px;\n}\nul#menu li:hover ul#sub {\ndisplay: block;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Menu x\u1ed5 l\u00e0 m\u1ed9t trong nh\u1eefng th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n nh\u1ea5t cho m\u1ecdi trang web c\u00f3 nhi\u1ec1u \u0111i\u1ec1u h\u01b0\u1edbng \u2013 c\u00e1i m\u00e0 menu th\u01b0\u1eddng theo ki\u1ec3u d\u00e0n tr\u1ea3i t\u1ea5t c\u1ea3 kh\u00f4ng th\u1ec3 thay th\u1ebf \u0111\u01b0\u1ee3c v\u00ec chi\u1ebfm qu\u00e1 nhi\u1ec1u di\u1ec7n t\u00edch. H\u00f4m nay t\u00f4i v\u00e0 b\u1ea1n s\u1ebd c\u00f9ng th\u1ef1c h\u00e0nh t\u1ea1o menu x\u1ed5, ti\u1ebfng Anh &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>H\u01b0\u1edbng d\u1eabn t\u1ea1o Menu x\u1ed5 b\u1eb1ng code CSS \u0111\u01a1n gi\u1ea3n &#8226; Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"H\u01b0\u1edbng d\u1eabn t\u1ea1o Menu x\u1ed5 b\u1eb1ng code CSS \u0111\u01a1n gi\u1ea3n &#8226; Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"Menu x\u1ed5 l\u00e0 m\u1ed9t trong nh\u1eefng th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n nh\u1ea5t cho m\u1ecdi trang web c\u00f3 nhi\u1ec1u \u0111i\u1ec1u h\u01b0\u1edbng \u2013 c\u00e1i m\u00e0 menu th\u01b0\u1eddng theo ki\u1ec3u d\u00e0n tr\u1ea3i t\u1ea5t c\u1ea3 kh\u00f4ng th\u1ec3 thay th\u1ebf \u0111\u01b0\u1ee3c v\u00ec chi\u1ebfm qu\u00e1 nhi\u1ec1u di\u1ec7n t\u00edch. H\u00f4m nay t\u00f4i v\u00e0 b\u1ea1n s\u1ebd c\u00f9ng th\u1ef1c h\u00e0nh t\u1ea1o menu x\u1ed5, ti\u1ebfng Anh &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-11-04T04:07:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/images-blogger-opensocial.googleusercontent.com\/gadgets\/proxy?url=http%3A%2F%2F3.bp.blogspot.com%2F-qG7Nlq-QBkU%2FUncciWIGQsI%2FAAAAAAAAC0A%2F0157aQlp0iM%2Fs1600%2Fmenu-xo.png&amp;container=blogger&amp;gadget=a&amp;rewriteMime=image%2F*\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"H\u01b0\u1edbng d\u1eabn t\u1ea1o Menu x\u1ed5 b\u1eb1ng code CSS \u0111\u01a1n gi\u1ea3n &#8226; Ki\u1ebfn c\u00e0ng","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiencang.net\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/","og_locale":"vi_VN","og_type":"article","og_title":"H\u01b0\u1edbng d\u1eabn t\u1ea1o Menu x\u1ed5 b\u1eb1ng code CSS \u0111\u01a1n gi\u1ea3n &#8226; Ki\u1ebfn c\u00e0ng","og_description":"Menu x\u1ed5 l\u00e0 m\u1ed9t trong nh\u1eefng th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n nh\u1ea5t cho m\u1ecdi trang web c\u00f3 nhi\u1ec1u \u0111i\u1ec1u h\u01b0\u1edbng \u2013 c\u00e1i m\u00e0 menu th\u01b0\u1eddng theo ki\u1ec3u d\u00e0n tr\u1ea3i t\u1ea5t c\u1ea3 kh\u00f4ng th\u1ec3 thay th\u1ebf \u0111\u01b0\u1ee3c v\u00ec chi\u1ebfm qu\u00e1 nhi\u1ec1u di\u1ec7n t\u00edch. H\u00f4m nay t\u00f4i v\u00e0 b\u1ea1n s\u1ebd c\u00f9ng th\u1ef1c h\u00e0nh t\u1ea1o menu x\u1ed5, ti\u1ebfng Anh &hellip;","og_url":"https:\/\/kiencang.net\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2013-11-04T04:07:00+00:00","og_image":[{"url":"https:\/\/images-blogger-opensocial.googleusercontent.com\/gadgets\/proxy?url=http%3A%2F%2F3.bp.blogspot.com%2F-qG7Nlq-QBkU%2FUncciWIGQsI%2FAAAAAAAAC0A%2F0157aQlp0iM%2Fs1600%2Fmenu-xo.png&amp;container=blogger&amp;gadget=a&amp;rewriteMime=image%2F*"}],"author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"3 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/","url":"https:\/\/kiencang.net\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/","name":"H\u01b0\u1edbng d\u1eabn t\u1ea1o Menu x\u1ed5 b\u1eb1ng code CSS \u0111\u01a1n gi\u1ea3n &#8226; Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2013-11-04T04:07:00+00:00","dateModified":"2013-11-04T04:07:00+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/huong-dan-tao-menu-xo-bang-code-css-don-gian\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"H\u01b0\u1edbng d\u1eabn t\u1ea1o Menu x\u1ed5 b\u1eb1ng code CSS \u0111\u01a1n gi\u1ea3n"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/304"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=304"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/304\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}