Trong b\u00e0i h\u01b0\u1edbng d\u1eabn n\u00e0y, t\u00f4i s\u1ebd h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n c\u00e1ch s\u1eed d\u1ee5ng CSS3 b\u1eb1ng c\u00e1ch t\u00f9y ch\u1ec9nh Pseudo Element<\/p>\n\n\n\n\n\n\n\n
\u0110\u1ea7u ti\u00ean ch\u00fang ta t\u1ea1o HTML sau:<\/p>\n\n\n
\n<nav class="ph-lift">\n <ul>\n <li class="active">\n <a href="#home" data-title="Home">Home<\/a>\n <\/li>\n <li>\n <a href="#portfolio" data-title="My works">My works<\/a>\n <\/li>\n <li>\n <a href="#about" data-title="Who am I?">Who am I?<\/a>\n <\/li>\n <li>\n <a href="#contact" data-title="Contact me">Contact me<\/a>\n <\/li>\n <\/ul>\n<\/nav>\n<\/pre><\/div>\n\n\nT\u1ea1o hi\u1ec7u \u1ee9ng hover thay \u0111\u1ed5i m\u00e0u n\u1ec1n v\u00e0 th\u00eam hi\u1ec7u \u1ee9ng \u0111\u1ed7 b\u00f3ng v\u00e0o b\u00ean trong:<\/p>\n\n\n
\nnav.ph-lift ul li {\n float: left;\n height: 90px;\n line-height: 90px;\n background: white;\n overflow: hidden;\n transition: all.6s ease; }\n nav.ph-lift ul li:hover {\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;\n background: teal; }\n\nnav.ph-lift ul li a {\n display: block;\n text-decoration: none;\n color: #007e7e;\n padding: 0 45px;\n margin-top: 0;\n transition: all.6s ease; }\n\nnav.ph-lift ul li:hover a {\n margin-top: -90px;\n color: white;\n text-shadow: 0 1px 2px black; }\n\nnav.ph-lift ul li a:after {\n content: attr(data-title);\n display: block; }\n<\/pre><\/div>\n\n\nT\u1ea1o HTML th\u1ee9 2 c\u00f3 menu con:<\/p>\n\n\n
\n<nav class="ph-lift1">\n <ul>\n <li class="active"><a href="#home" data-title="Home"><span data-title="Home">Home<\/span><\/a>\n <ul>\n <li><a href="#"><span data-title="Featured">Featured<\/span><\/a><\/li>\n <li><a href="#"><span data-title="Top 10">Top 10<\/span><\/a><\/li>\n <\/ul>\n <\/li>\n <li><a href="#portfolio"><span data-title="My works">My works<\/span><\/a>\n <ul>\n <li><a href="#"><span data-title="Web design">Web design<\/span><\/a><\/li>\n <li><a href="#"><span data-title="Illustrations">Illustrations<\/span><\/a><\/li>\n <li><a href="#"><span data-title="Patterns">Patterns<\/span><\/a><\/li>\n <\/ul>\n <\/li>\n <li><a href="#"><span data-title="Who am I?">Who am I?<\/span><\/a><\/li>\n <li><a href="#"><span data-title="Contact me">Contact me<\/span><\/a>\n <ul>\n <li><a href="#"><span data-title="Email me">Email me<\/span><\/a><\/li>\n <li><a href="#"><span data-title="Network">Network<\/span><\/a><\/li>\n <\/ul>\n <\/li>\n <\/ul>\n<\/nav>\n<\/pre><\/div>\n\n\nCSS ch\u00ednh b\u1ea1n v\u1eabn v\u1eabn l\u00e0m nh\u01b0 tr\u00ean nh\u01b0ng th\u00eam v\u00e0o t\u00ednh n\u0103ng overflow:hidden cho ph\u1ea7n t\u1eed<\/p>\n\n\n
\nnav.ph-lift1 > ul > li {\n float: left; }\n nav.ph-lift1 ul li {\n height: 80px;\n line-height: 80px;\n background: white;\n -webkit-transition: all.6s ease;\n -moz-transition: all.6s ease;\n -o-transition: all.6s ease;\n -ms-transition: all.6s ease;\n transition: all.6s ease; }\n nav.ph-lift1 ul li ul {\n max-height: 0;\n -webkit-transition: all.6s ease;\n -moz-transition: all.6s ease;\n overflow: hidden;\n display: block; }\n nav.ph-lift1 ul li:hover {\n box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;\n background: darkolivegreen; }\n nav.ph-lift1 ul li:hover ul {\n max-height: 300px; }\n nav.ph-lift1 ul li a {\n display: block;\n overflow: hidden;\n text-decoration: none;\n color: #546a2f;\n height: 80px; }\n nav.ph-lift1 ul li ul li a {\n color: #7e7e00; }\n nav.ph-lift1 ul li ul li:hover {\n background: olive; }\n nav.ph-lift1 ul li a span {\n -webkit-transition: all.6s ease;\n -moz-transition: all.6s ease;\n -o-transition: all.6s ease;\n -ms-transition: all.6s ease;\n transition: all.6s ease;\n display: block;\n padding: 0 40px; }\n nav.ph-lift1 ul li:hover > a span {\n margin-top: -80px;\n color: white;\n text-shadow: 0 1px 2px black; }\n nav.ph-lift1 ul li a span:after {\n content: attr(data-title);\n display: block; }\n<\/pre><\/div>\n\n\nCh\u00fac c\u00e1c b\u1ea1n th\u00e0nh c\u00f4ng!<\/p>\n","protected":false},"excerpt":{"rendered":"
Trong b\u00e0i h\u01b0\u1edbng d\u1eabn n\u00e0y, t\u00f4i s\u1ebd h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n c\u00e1ch s\u1eed d\u1ee5ng CSS3 b\u1eb1ng c\u00e1ch t\u00f9y ch\u1ec9nh Pseudo […]<\/p>\n","protected":false},"author":6,"featured_media":8659,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145],"tags":[],"class_list":["post-6063","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css"],"views":459,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/6063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=6063"}],"version-history":[{"count":11,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/6063\/revisions"}],"predecessor-version":[{"id":8670,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/6063\/revisions\/8670"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media\/8659"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=6063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=6063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=6063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}