Dropdown Menu l\u00e0 d\u1ea1ng menu r\u1ea5t ph\u1ed5 bi\u1ebfn tr\u00ean nhi\u1ec1u trang web \u0111\u1eb7c bi\u1ec7t l\u00e0 nh\u1eefng trang web c\u00f3 c\u1ea5u tr\u00fac ph\u1ee9c t\u1ea1p v\u00e0 c\u1ea7n nhi\u1ec1u m\u1ee5c \u0111\u1ec3 hi\u1ec3n th\u1ecb h\u1ebft n\u1ed9i dung c\u1ee7a trang.<\/p>\n\n\n\n
H\u00f4m nay, m\u00ecnh s\u1ebd gi\u1edbi thi\u1ec7u v\u1edbi c\u00e1c b\u1ea1n b\u00e0i h\u01b0\u1edbng d\u1eabn “T\u1ea1o Red Dropdown Menu \u1ea4n T\u01b0\u1ee3ng B\u1eb1ng CSS3”. Hy v\u1ecdng trang web c\u1ee7a b\u1ea1n c\u00f3 th\u00eam 1 menu tuy\u1ec7t \u0111\u1eb9p.<\/p>\n\n\n\n
Sau \u0111\u00e2y l\u00e0 c\u00e1c b\u01b0\u1edbc th\u1ef1c hi\u1ec7n:<\/p>\n\n\n\n
1. CODE HTML<\/p>\n\n\n
\n<div id='mainmenu'>\n <div class='wrap'>\n <nav id='nav'>\n <ul>\n <li class='mhome'><a href='#'>Home<\/a><\/li>\n <li><a href='#'>News<\/a><\/li>\n <li><a href='#'>Dropdown<\/a>\n <ul class='submenu hidden'>\n <li><a href='#'>Dropdown 1<\/a><\/li>\n <li><a href='#'>Dropdown 2<\/a><\/li>\n <li><a href='#'>Dropdown 3<\/a><\/li>\n <li><a href='#'>Dropdown 4<\/a><\/li>\n <\/ul>\n <\/li>\n <li><a href='#'>Business<\/a><\/li>\n <li><a href='#'>Education<\/a><\/li>\n <li><a href='#'>Lifestyle<\/a><\/li>\n <li><a href='#'>Fashion<\/a><\/li>\n <li><a href='#'>Photo<\/a><\/li>\n <li><a href='#'>Video<\/a><\/li>\n <\/ul>\n <\/nav>\n <div class='clear'><\/div>\n <\/div>\n<\/div>\n<\/pre><\/div>\n\n\n2. CODE CSS<\/p>\n\n\n
\n*{margin:0;padding:0}\n\nul, li, li {\n list-style: none;\n}\n\na {\n textdecoration: none;\n}\n\n#mainmenu {\n background: #222;\n height: 50px;\n width: 980px;\n margin: 25px auto;\n padding: 0;\n border-bottom: 5px solid #ee1133;\n}\n\n#submenu {\n background: transparent;\n margin-bottom: 10px;\n}\n\n#nav ul {\n margin: 0;\n padding: 0;\n}\n\n#nav li {\n background: url(http:\/\/3.bp.blogspot.com\/-GUh9UbWqUr4\/UlBzMAlrbII\/AAAAAAAABCI\/dceZOq7l2tk\/s1600\/menuline.png) no-repeat right top;\n float: left;\n position: relative;\n padding: 0 28px 0 23px;\n margin: 0 0 0 0;\n}\n\n#nav li:last-child{\n background: none\n}\n\n#nav li a {\n color: #fff;\n display: inline-block;\n padding: 18px 0 18px 0;\n margin: 0 0 0 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 14px;\n text-transform: uppercase;\n text-decoration: none;\n}\n\n#nav ul li:hover {\n background-color: #ee1133;\n text-decoration: none;\n}\n\n#nav li:last-child a {\n}\n\n#nav ul.submenu {\n -moz-border-radius-bottomright: 3px;\n -moz-border-radius-bottomleft: 3px;\n position: absolute;\n top: 52px;\n left: 0px;\n width: 180px;\n z-index: 99;\n float: left;\n background: #2D2D2D!important;\n -webkit-box-shadow: 0 3px 4px 1px rgba(0,0,0,0.2);\n box-shadow: 0 3px 4px 1px rgba(0,0,0,0.2);\n -webkit-border-bottom-right-radius: 3px;\n -webkit-border-bottom-left-radius: 3px;\n -moz-border-bottom-right-radius: 3px;\n -moz-border-bottom-left-radius: 3px;\n border-bottom-right-radius: 3px;\n border-bottom-left-radius: 3px;\n height: auto;\n -khtml-opacity: 0;\n -moz-opacity: 0;\n opacity: 0;\n visibility: hidden;\n -webkit-transition: all .5s ease 0;\n -o-transition: all .5s ease 0;\n transition: all .5s ease 0;\n -moz-transition: all .5s ease 0;\n padding: 0;\n border: 3px solid #d900000;\n}\n\n#nav ul.submenu li {\n float: none;\n border-bottom: 1px solid #222;\n border-top: 1px solid #383838;\n border-left: 0 none;\n margin: 0;\n}\n\n#nav li:hover ul.submenu {\n -khtml-opacity: 1;\n -moz-opacity: 1;\n opacity: 1;\n visibility: visible;\n}\n\n#nav ul.submenu li:first-child {\n border-top: 0 none;\n}\n\n#nav li.mhome {\n border: 0;\n margin-top: 0;\n background-color: #ee1133;\n}\n<\/pre><\/div>\n\n\nCh\u00fac c\u00e1c b\u1ea1n th\u00e0nh c\u00f4ng!<\/p>\n","protected":false},"excerpt":{"rendered":"
Dropdown Menu l\u00e0 d\u1ea1ng menu r\u1ea5t ph\u1ed5 bi\u1ebfn tr\u00ean nhi\u1ec1u trang web \u0111\u1eb7c bi\u1ec7t l\u00e0 nh\u1eefng trang web c\u00f3 c\u1ea5u […]<\/p>\n","protected":false},"author":6,"featured_media":9501,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145],"tags":[],"class_list":["post-4521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css"],"views":441,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/4521","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=4521"}],"version-history":[{"count":7,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/4521\/revisions"}],"predecessor-version":[{"id":9503,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/4521\/revisions\/9503"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media\/9501"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=4521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=4521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=4521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}