z-index not effect with child element

Question

I have a website Suoi Hong Resort

But block of menu display behind logo.

.navigation class has position is absolute, z-index is 3. Logo has position is absolute. z-index is 2. And block has z-index is 10. But block of menu cannot display in fron of logo.

Please help me this issue!

 * { margin: 0; padding: 0; text-decoration: none; list-style: none; border: none; outline: none; } @font-face { font-family: UTM_Alberta_Heavy; src: url("/Styles/CSS/Font/UTM_Alberta_Heavy/UTM ALBERTA HEAVY.TTF"); } @font-face { font-family: Pristina; src: url("/Styles/CSS/Font/Pristina/PRISTINA_0.TTF"); } @font-face { font-family: UVN_Van; src: url("/Styles/CSS/Font/UVN_Van/UVNVAN_R.TTF"); } @font-face { font-family: UTM_Pierre; src: url("/Styles/CSS/Font/UTM_Pierre/UTM PIERRE.TTF"); } @font-face { font-family: UVN_MAU_TIM_1; src: url("/Styles/CSS/Font/UVN_Mau_Tim_1/UVNMAUTIM1.TTF"); } @font-face { font-family: UVN_MAU_TIM_2; src: url("/Styles/CSS/Font/UVN_Mau_Tim_2/UVNMAUTIM2.TTF"); } @font-face { font-family: UTM_DINH_TRAN; src: url("/Styles/CSS/Font/UTM_Dinh_Tran/UTM DINH TRAN.TTF"); } @font-face { font-family: UVN_Tin_Tuc_Nhe; src: url("/Styles/CSS/Font/UVN_Tin_Tuc_Nhe/UVNTINTUCNHE_R.TTF"); } @font-face { font-family: MuaThu; src: url("/Styles/CSS/Font/MuaThu/UVNMUATHU.TTF"); } @font-face { font-family: Caolanh; src: url("/Styles/CSS/Font/Caolanh/CAOLANH.TTF"); } .img { float: left; width: 100%; height: 100%; } .link { float: left; width: 100%; height: 100%; } h1 { font-weight: normal; } body, .line-fix-parent-width, .container, .header { float: left; width: 100%; } body { background-color: #381004; background-image: url("/Design/bg.png"); } .container { } /* CSS for navigation-left */ .navigation { float: left; width: 100%; height: 72px; background-color: rgba(253,230,199,1); background-image: url("/Design/nav-bg.png"); background-repeat: repeat; position: fixed; top: 0; z-index: 2; } /*CSS For navigation*/ .navigation-wrapper { float: left; width: 73.206%; margin-left: 13.397%; } .nav { float: left; width: 39%; } navigation-left { float: left; } .navigation-right { float: right; } .nav ul { float: left; width: 100%; } .nav ul li { float: left; font-family: UVN_Van; } .nav ul li a { padding: 13px; color: #FFF; font-size: 13px; float: left; } .nav > ul > li { margin-top: 16px; } .nav > ul > li > a { padding: 13px; } .nav li.active { background-color: rgba(255, 255, 255, 0.2); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .nav li.active > a { color: #FFF; } .nav > ul li:hover { background-color: #fde6c7; } .nav > ul li:hover a { color: #FFF; } .nav > ul > li:hover { border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; color: #FFF; background-color: rgba(255, 255, 255, 0.2); } .nav > ul > li.has-sub > ul { top: 99%; left: 0; z-index: 10; } .nav > ul > li.has-sub { border-top-left-radius: 3px; border-top-right-radius: 3px; } .has-sub span.arrow { text-align: center; margin-left: 3px; } .nav > ul > li.has-sub > span.arrow { float: left; width: 100%; text-align: center; margin-top: -6px; margin-left: 0px; } .has-sub { position: relative; } .has-sub > ul { position: absolute; top: -1px; left: 225px; /*display: none;*/ width: 100%; height: 0px; overflow: hidden; transition: all .4s linear; } .has-sub > ul > li { background-color: rgba(55, 109, 173, 0.8); width: 225px; height: 0px; overflow: hidden; border-top: 1px solid #C0C0C0; padding-left: 0; padding-right: 0; text-align: left; } .has-sub > ul > li:first-child { /*border-top: none;*/ /*border-top-left-radius: 3px; border-top-right-radius: 3px;*/ } .has-sub > ul > li:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .has-sub > ul li a, .has-sub > ul li:hover a { color: #FFF; } .has-sub:hover > ul { /*display: block;*/ width: 225px; height: auto; } .has-sub:hover > ul > li { float: left; width: 100%; height: auto; } .has-sub > ul > li:hover { background-color: rgba(55, 109, 173, 0.6); } /*CSS For navigation - End*/ .navi-hr { float: left; width: 100%; height: 7px; background-color: #2e72cd; position: fixed; top: 72px; z-index: 1; } /*CSS for Logo*/ .logo { float: left; width: 14.348%; height: 100px; border-left: 5px solid #2e72cd; border-right: 5px solid #2e72cd; border-bottom: 5px solid #2e72cd; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; position: fixed; top: 0; left: 42.326%; /*background-color: #f9d7a2;*/ background: #feffff; /* Old browsers */ background: -moz-linear-gradient(top, #feffff 0%, #8db9f3 0%, #ddf1f9 0%, #a0d8ef 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(0%,#8db9f3), color-stop(0%,#ddf1f9), color-stop(100%,#a0d8ef)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #feffff 0%,#8db9f3 0%,#ddf1f9 0%,#a0d8ef 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #feffff 0%,#8db9f3 0%,#ddf1f9 0%,#a0d8ef 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #feffff 0%,#8db9f3 0%,#ddf1f9 0%,#a0d8ef 100%); /* IE10+ */ background: linear-gradient(to bottom, #feffff 0%,#8db9f3 0%,#ddf1f9 0%,#a0d8ef 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 ); /* IE6-9 */ z-index: 3; } .res-name { margin-top: 15px; color: #04326b; font-family: UVN_Mau_Tim_1; font-size: 34px; text-align: center; font-weight: normal; text-transform: uppercase; } .res-type { margin-top: 5px; } .res-cat { float: left; width: 34%; color: #04326b; font-family: Caolanh; font-size: 35px; text-align: center; font-weight: normal; } .sp { float: left; width: 27%; margin: 11% 2% 0 4%; height: 1px; background-color: #04326b; } .sp-left { } .sp-right { } /*CSS for Logo - End*/ .wrapper { float: left; width: 73.206%; margin-top: 80px; margin-left: 13.397%; } /*CSS for slideshow*/ .horizontal-slideshow { float: left; width: 99.2%; height: 401px; padding: 0.4%; border: 1px solid #99c3fa; background-color: #2e72cd; position: relative; } /*CSS for Language bar*/ .icon-bar { width: 18.8%; height: 8.728%; position: absolute; top: 1%; right: 0.4%; } .lang-bar { background: rgba(255,255,255,0.6); } .lang-bar { float: left; width: 100%; height: 100%; } .lang-item { float: left; width: 47%; height: 63%; margin-left: 3%; margin-top: 3%; } .lang-item a { float: left; width: 100%; height: 100%; } .lang-icon { float: left; width: 34.722%; margin-right: 3%; height: 100%; } .lang-name { float: left; width: 62.265%; height: 100%; } .lang-name span { float: left; width: 100%; height: 100%; margin-top: 6%; font-size: 13px; font-family: UVN_Van; color: #545454; } /*CSS for Service bar*/ .service { float: left; width: 100%; padding: 0.9% 0 1.7%; } .service-box { float: left; width: 19.6%; height: 123px; margin-right: 0.5%; background-color: #FFF; position: relative; } .service-box:last-child { margin-right: 0; } .service-title { float: left; width: 93%; position: absolute; top: 10%; } .service-title-tren { color: #96bff5; float: left; width: 91%; font-family: "MuaThu"; font-size: 20px; padding-left: 9%; text-shadow: 1px 1px 0 rgba(0, 0, 0, 1); } .service-title-duoi { float: left; width: 92%; padding-left: 8%; font-family: 'Times New Roman'; font-size: 25px; font-weight: bold; color: #96bff5; text-shadow: 1px 1px 0px rgba(0, 0, 0, 1); } /*End*/ .special-seperate { float: left; width: 100%; height: 47px; background-image: url("/Design/title-bg.png"); background-repeat: no-repeat; background-size: 100% 100%; } .special-seperate-title { float: left; width: auto; margin-left: 1%; margin-right: 1%; margin-top: 2.2%; font-family: 'Times New Roman'; font-size: 15px; font-weight: normal; color: #FFF; text-transform: uppercase; } .arrow { float: left; width: 4.2%; margin-top: 2.2%; } .body-wrapper { float: left; width: 100%; } .lbody { float: left; width: 75.3%; margin-right: 1.6%; } .content { float: left; width: 96.8%; border: 1px solid #99c3fa; padding: 1.778% 1.504% 0.957%; font-family: Arial; font-size: 13px; color: #FFF; text-align: justify; border-radius: 3px; line-height: 16px; background-color: #2e72cd; background-image: url("/Design/hoavan.png"); background-repeat: no-repeat; background-position: top right; } .content img { max-width: 100%; } .content-detail { float: left; width: 100%; } .m-read-more { float: left; width: 100%; margin-top: 2px; text-align: right; font-style: italic; color: #FFF; } .block { float: left; } .video-block { float: left; width: 35.157%; margin-right: 2.6%; margin-top: 27px; /*margin-bottom: 18px;*/ } .photo-block { float: left; width: 62.243%; margin-top: 27px; /*margin-bottom: 18px;*/ } .block-title { float: left; width: 100%; margin-bottom: 9px; } .block-title h1 { float: left; width: 100%; font-family: 'Times New Roman'; font-size: 15px; text-transform: uppercase; color: #FFF; } .block-content { float: left; border: 1px solid #99c3fa; background-color: #2e72cd; } .video-block .block-content { width: 95.5%; height: 204px; padding: 2.222%; position: relative; } .play { float: left; width: 10.778%; height: 14.509%; position: absolute; top: 42.944%; left: 45.111%; opacity: 0.2; transition: all 0.2s ease-in-out; } .play:hover, .video-block .block-content:hover .play { opacity: 1; width: 19.778%; height: 24.509%; top: 37.944%; left: 40.111%; } .photo-block .block-content { width: 97%; height: 204px; padding: 1.366%; } .photo-wrapper { float: left; width: 94.774%; padding: 3.2% 1.493% 0.64% 3.627%; background-color: #4e8fe6; height: 91%; overflow: hidden; } .photo-item { float: left; width: 31%; height: 82px; margin-right: 2.254%; margin-bottom: 2.654%; } .rbody { float: left; width: 23.1%; } .booking-block { width: 100%; } .contact-block { width: 100%; margin-top: 27px; } .contact-wrapper { float: left; width: 86.725%; height: 86.225%; padding: 6.637%; background-color: #4e8fe6; } .booking-block .block-content, .contact-block .block-content { width: 94.5%; height: 170px; padding: 2.722%; background-color: #2e72cd; } .contact-block .block-content { min-height: 203px; } .phone { float: left; width: 21.164%; margin: 5px 0; } .phone-sp { float: left; width: 100%; height: 1px; border-top: 1px solid #65a4f8; background-color: #3a7acf; } .contact-item { float: left; width: 100%; margin-top: 10px; margin-bottom: 5px; font-family: 'Times New Roman'; color: #FFF; } .c-phone, .c-name, .c-email { float: left; width: 100%; } .c-phone { font-size: 25px; font-weight: bold; } .c-name { font-size: 15px; font-weight: bold; } .c-email { font-family: Arial; font-size: 13px; } .footer { float: left; width: 100%; background-color: #002149; margin-top: 19px; border-top: 1px solid #001329; } .l-footer, .r-footer { float: left; width: 50%; } .footer-wrapper { float: left; width: 71.206%; margin-left: 13.397%; padding: 1%; font-family: Arial; font-size: 13px; color: #FFF; } .l-footer { } .l-footer p:first-child { margin-bottom: 5px; } .l-footer p:last-child { } .r-footer a { color: #FFF; } .r-footer { text-align: right; } .r-footer p:first-child { /*margin-bottom: 5px;*/ } .r-footer p:last-child { } .product-container { float: left; width: 102%; margin-top: 20px; } .check-rate-result-mess { color: #ddd491; float: left; width: 100%; font-family: UVN_ChuKy; font-size: 17px; text-align: center; margin-bottom: 10px; margin-top: -10px; line-height: 20px; } .product-box { float: left; width: 30%; margin-right: 2%; margin-bottom: 19px; padding: 0.5%; /*border: 1px solid #840404;*/ height: 306px; -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3); -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3); box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3); background-color: #FFF; position: relative; } .product-box:hover { background-color: #fcf7e8; } .product-box img { width: 100%; height: 135px; border-bottom: 1px solid #e0bbef; } .product-title { width: 100%; text-align: center; margin-top: 5px; margin-bottom: 5px; } .product-title a { /*float: left;*/ width: 100%; font-family: UTM_DINH_TRAN; font-size: 30px; color: #840404; } .product-title a:hover { color: #d03c3c; } .product-seperate { width: 100%; height: 1px; /*margin: 5px auto 7px;*/ background-color: #840404; } .product-sumary { width: 100%; margin: 15px auto 0; text-align: center; color: #6f6f6f; font-family: "UVN_Tin_Tuc_Nhe"; font-size: 14px; } .product-box .intro-readmore:hover { border: none; } .titlecategory { font-family: UTM_DINH_TRAN; font-size: 35px; color: #443d37; } .intro-readmore { background-color: #e0c34b; position: absolute; bottom: 4%; right: 32%; width: 36%; height: 30px; border-radius: 3px; background-image: url("/Design/pattern_06.png"); background-position: top right; background-repeat: no-repeat; background-size: 40% 100%; } .intro-readmore a { color: #FFF; margin-top: 7%; float: left; text-align: center; width: 100%; font-family: UVN_Tin_Tuc_Nhe; } .intro-readmore:hover { /*background-color: #f8e180;*/ } /* CSS For Room detail*/ .left-block { float: left; width: 60%; } .main-pic { float: left; height: 300px; width: 97%; margin-bottom: 5px; /*border: 1px solid #848990;*/ text-align: center; background-color: rgba(189,199,210,0.3); } .main-pic img { /*width: 100%;*/ height: 100%; max-width: 100%; /*border: 1px solid #848990;*/ border: 1px solid #848990; } .thumb-pic { float: left; width: 100%; } .thumb-item { /*border: 1px solid;*/ float: left; height: 72px; margin-bottom: 1%; margin-right: 1.5%; margin-top: 0.5%; width: 23%; } .nav-thumb { width: 100%; height: 100%; border: 1px solid #848990; } .item-active { border: 1px solid #009bd5; } .right-block { float: left; width: 39%; text-align: justify; font-family: UVN_Tin_Tuc_Nhe; } .titlepro { font-weight: bold; font-size: 15px; color: #C0C0C0; line-height: 16px; } .des-info, .fared { font-size: 15px; } .fared { } .lbdetail { float: left; font-size: 15px; margin-left: 26px; margin-top: -15px; } .contactproduct { color: #FFF; float: right; text-align: center; font-family: UVN_Tin_Tuc_Nhe; font-size: 17px; background-color: #e0c34b; width: 36%; height: 30px; border-radius: 2px; background-image: url("/Design/pattern_06.png"); background-position: top right; background-repeat: no-repeat; background-size: 40% 100%; padding-top: 2%; margin-bottom: 5%; margin-right: 3%; } .contactproduct:hover { /*background-color: #916ea0;*/ } .right-block hr { float: left; width: 97%; /*border-bottom: 1px dashed #3399FF;*/ } .right-block .line-witdth-fix-parent { text-align: left; } .pic-title { font-family: UVN_MAU_TIM_2; font-size: 23px; color: #443d37; margin-left: 1%; } /*CSS FOR Check rate*/ .check-rate-wrapper { float: left; width: 100%; } .right-footer-reservation { width: 45%; height: 216px; margin: 1% auto 2%; background-color: rgba(244,244,244,0.8); -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3); -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3); box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3); /*background-color: rgba(189,199,210,0.8);*/ } .right-footer-reservation-wraper, .right-footer-info-wraper { width: 95%; margin: 0 auto; } .reservation-input { float: left; width: 100%; height: 25px; border: 1px solid #FFF; margin-top: 7px; margin-bottom: 7px; background-color: #dee3e9; font-family: Arial; font-size: 12px; position: relative; } .half { width: 47.3%; margin-right: 4%; } div.half:last-child { margin-right: 0; } .right-footer-reservation p { float: left; width: 100%; text-align: center; margin-bottom: 5%; height: 25px; font-family: UTM_DINH_TRAN; font-size: 45px; color: #443d37; } .select-number, .chose-date { float: left; width: 100%; height: 100%; border: none; margin: 0; padding: 0; box-shadow: none; background-color: transparent; color: #7a7877; padding-left: 5px; } .select-number { /*width: 107px;*/ } .chose-date { /*width: 162px;*/ } .input-icon { position: absolute; top: 0; right: 0; background-color: #dee3e9; height: 25px; width: 24px; } .input-icon img.date { float: left; margin-top: 5px; margin-right: 8px; } .input-icon img.number { float: left; margin-left: 13px; margin-top: 9px; } .btnCheckRate { color: #FFF; float: right; text-align: center; font-family: UVN_Tin_Tuc_Nhe; background-color: #e0c34b; width: 27%; height: 36px; border-radius: 3px; background-image: url("/Design/pattern_06.png"); background-position: top right; background-repeat: no-repeat; background-size: 40% 100%; font-size: 18px; border: none; margin-top: 1%; } 

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="ctl00_ctl00_Head1"><title> Resort Suối Hồng tại Mũi Né </title> <meta name="Keywords" content="Resort Suối Hồng, resort tại Mũi Né" /> <meta name="description" content="Resort Suối Hồng Mũi Né là nơi nghĩ dưỡng lý tưởng khi đến với Phan Thiết" /> <meta name="generator" content="" /> </head> <body> <form> <div class="container"> <div class="navigation"> <div class="navigation-wrapper"> <div class="nav navigation-left"> <ul><li class='active'><a href='/vn/home-12.html'> <span>TRANG CHỦ</span></a></li><li><a href='/vn/article/introduction-suoi-hong-resort-14-1.html'> <span>GIỚI THIỆU</span></a></li><li class='has-sub'><a href='/vn/danh-sach-phong-2-2.html'> <span>PHÒNG NGỦ</span></a><ul><li><a href='/vn/phong-ngu-1-2.html'> <span>Phòng một giường</span></a></li><li><a href='/vn/phong-ngu-2-2.html'> <span>Phòng hai giường</span></a></li></ul></li><li class='has-sub'><a href='javascript:void();'> <span>DỊCH VỤ</span></a><ul><li><a href='/vn/article/phuc-vu-khach-doan-23-3.html'> <span>Phục vụ khách đoàn</span></a></li><li><a href='/vn/article/dich-vu-tam-bien-24-3.html'> <span>Dịch vụ tắm biển</span></a></li></ul></li></ul> </div> <div class="nav navigation-right"> <ul><li><a href='/vn/category/information-4-4.html'> <span>THÔNG TIN</span></a></li><li><a href='/vn/gallery-6.html'> <span>HÌNH ẢNH</span></a></li><li><a href='/vn/video-5.html'> <span>VIDEO -CLIPS</span></a></li><li><a href='/vn/contact-7.html'> <span>LIÊN HỆ</span></a></li></ul> </div> </div> </div> <div class="navi-hr"></div> <div class="logo"> <a href="/vn/home-12.html" class="link"> <h1 class="res-name line-fix-parent-width">Suối Hồng</h1> <div class="res-type line-fix-parent-width"> <span class="sp sp-left"></span> <span class="res-cat">Resort</span> <span class="sp sp-left"></span> </div> </a> </div> <div class="wrapper"> </div> </form> </body> </html> 

Answer 1

 * { margin: 0; padding: 0; text-decoration: none; list-style: none; border: none; outline: none; } @font-face { font-family: UTM_Alberta_Heavy; src: url("/Styles/CSS/Font/UTM_Alberta_Heavy/UTM ALBERTA HEAVY.TTF"); } @font-face { font-family: Pristina; src: url("/Styles/CSS/Font/Pristina/PRISTINA_0.TTF"); } @font-face { font-family: UVN_Van; src: url("/Styles/CSS/Font/UVN_Van/UVNVAN_R.TTF"); } @font-face { font-family: UTM_Pierre; src: url("/Styles/CSS/Font/UTM_Pierre/UTM PIERRE.TTF"); } @font-face { font-family: UVN_MAU_TIM_1; src: url("/Styles/CSS/Font/UVN_Mau_Tim_1/UVNMAUTIM1.TTF"); } @font-face { font-family: UVN_MAU_TIM_2; src: url("/Styles/CSS/Font/UVN_Mau_Tim_2/UVNMAUTIM2.TTF"); } @font-face { font-family: UTM_DINH_TRAN; src: url("/Styles/CSS/Font/UTM_Dinh_Tran/UTM DINH TRAN.TTF"); } @font-face { font-family: UVN_Tin_Tuc_Nhe; src: url("/Styles/CSS/Font/UVN_Tin_Tuc_Nhe/UVNTINTUCNHE_R.TTF"); } @font-face { font-family: MuaThu; src: url("/Styles/CSS/Font/MuaThu/UVNMUATHU.TTF"); } @font-face { font-family: Caolanh; src: url("/Styles/CSS/Font/Caolanh/CAOLANH.TTF"); } .img { float: left; width: 100%; height: 100%; } .link { float: left; width: 100%; height: 100%; } h1 { font-weight: normal; } body, .line-fix-parent-width, .container, .header { float: left; width: 100%; } body { background-color: #381004; background-image: url("/Design/bg.png"); } .container { } /* CSS for navigation-left */ .navigation { float: left; width: 100%; height: 72px; background-color: rgba(253,230,199,1); background-image: url("/Design/nav-bg.png"); background-repeat: repeat; position: fixed; top: 0; z-index: 2; } /*CSS For navigation*/ .navigation-wrapper { float: left; width: 73.206%; margin-left: 13.397%; } .nav { float: left; width: 39%; } navigation-left { float: left; } .navigation-right { float: right; } .nav ul { float: left; width: 100%; } .nav ul li { float: left; font-family: UVN_Van; } .nav ul li a { padding: 13px; color: #FFF; font-size: 13px; float: left; } .nav > ul > li { margin-top: 16px; } .nav > ul > li > a { padding: 13px; } .nav li.active { background-color: rgba(255, 255, 255, 0.2); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .nav li.active > a { color: #FFF; } .nav > ul li:hover { background-color: #fde6c7; } .nav > ul li:hover a { color: #FFF; } .nav > ul > li:hover { border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; color: #FFF; background-color: rgba(255, 255, 255, 0.2); } .nav > ul > li.has-sub > ul { top: 99%; left: 0; z-index: 10; } .nav > ul > li.has-sub { border-top-left-radius: 3px; border-top-right-radius: 3px; } .has-sub span.arrow { text-align: center; margin-left: 3px; } .nav > ul > li.has-sub > span.arrow { float: left; width: 100%; text-align: center; margin-top: -6px; margin-left: 0px; } .has-sub { position: relative; } .has-sub > ul { position: absolute; top: -1px; left: 225px; /*display: none;*/ width: 100%; height: 0px; overflow: hidden; transition: all .4s linear; } .has-sub > ul > li { background-color: rgba(55, 109, 173, 0.8); width: 225px; height: 0px; overflow: hidden; border-top: 1px solid #C0C0C0; padding-left: 0; padding-right: 0; text-align: left; } .has-sub > ul > li:first-child { /*border-top: none;*/ /*border-top-left-radius: 3px; border-top-right-radius: 3px;*/ } .has-sub > ul > li:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } .has-sub > ul li a, .has-sub > ul li:hover a { color: #FFF; } .has-sub:hover > ul { /*display: block;*/ width: 225px; height: auto; } .has-sub:hover > ul > li { float: left; width: 100%; height: auto; } .has-sub > ul > li:hover { background-color: rgba(55, 109, 173, 0.6); } /*CSS For navigation - End*/ .navi-hr { float: left; width: 100%; height: 7px; background-color: #2e72cd; position: fixed; top: 72px; z-index: 1; } /*CSS for Logo*/ .logo { float: left; width: 14.348%; height: 100px; border-left: 5px solid #2e72cd; border-right: 5px solid #2e72cd; border-bottom: 5px solid #2e72cd; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; position: fixed; top: 0; left: 42.326%; /*background-color: #f9d7a2;*/ background: #feffff; /* Old browsers */ background: -moz-linear-gradient(top, #feffff 0%, #8db9f3 0%, #ddf1f9 0%, #a0d8ef 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(0%,#8db9f3), color-stop(0%,#ddf1f9), color-stop(100%,#a0d8ef)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #feffff 0%,#8db9f3 0%,#ddf1f9 0%,#a0d8ef 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #feffff 0%,#8db9f3 0%,#ddf1f9 0%,#a0d8ef 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #feffff 0%,#8db9f3 0%,#ddf1f9 0%,#a0d8ef 100%); /* IE10+ */ background: linear-gradient(to bottom, #feffff 0%,#8db9f3 0%,#ddf1f9 0%,#a0d8ef 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 ); /* IE6-9 */ z-index: 3; } .res-name { margin-top: 15px; color: #04326b; font-family: UVN_Mau_Tim_1; font-size: 34px; text-align: center; font-weight: normal; text-transform: uppercase; } .res-type { margin-top: 5px; } .res-cat { float: left; width: 34%; color: #04326b; font-family: Caolanh; font-size: 35px; text-align: center; font-weight: normal; } .sp { float: left; width: 27%; margin: 11% 2% 0 4%; height: 1px; background-color: #04326b; } .sp-left { } .sp-right { } /*CSS for Logo - End*/ .wrapper { float: left; width: 73.206%; margin-top: 80px; margin-left: 13.397%; } /*CSS for slideshow*/ .horizontal-slideshow { float: left; width: 99.2%; height: 401px; padding: 0.4%; border: 1px solid #99c3fa; background-color: #2e72cd; position: relative; } /*CSS for Language bar*/ .icon-bar { width: 18.8%; height: 8.728%; position: absolute; top: 1%; right: 0.4%; } .lang-bar { background: rgba(255,255,255,0.6); } .lang-bar { float: left; width: 100%; height: 100%; } .lang-item { float: left; width: 47%; height: 63%; margin-left: 3%; margin-top: 3%; } .lang-item a { float: left; width: 100%; height: 100%; } .lang-icon { float: left; width: 34.722%; margin-right: 3%; height: 100%; } .lang-name { float: left; width: 62.265%; height: 100%; } .lang-name span { float: left; width: 100%; height: 100%; margin-top: 6%; font-size: 13px; font-family: UVN_Van; color: #545454; } /*CSS for Service bar*/ .service { float: left; width: 100%; padding: 0.9% 0 1.7%; } .service-box { float: left; width: 19.6%; height: 123px; margin-right: 0.5%; background-color: #FFF; position: relative; } .service-box:last-child { margin-right: 0; } .service-title { float: left; width: 93%; position: absolute; top: 10%; } .service-title-tren { color: #96bff5; float: left; width: 91%; font-family: "MuaThu"; font-size: 20px; padding-left: 9%; text-shadow: 1px 1px 0 rgba(0, 0, 0, 1); } .service-title-duoi { float: left; width: 92%; padding-left: 8%; font-family: 'Times New Roman'; font-size: 25px; font-weight: bold; color: #96bff5; text-shadow: 1px 1px 0px rgba(0, 0, 0, 1); } /*End*/ .special-seperate { float: left; width: 100%; height: 47px; background-image: url("/Design/title-bg.png"); background-repeat: no-repeat; background-size: 100% 100%; } .special-seperate-title { float: left; width: auto; margin-left: 1%; margin-right: 1%; margin-top: 2.2%; font-family: 'Times New Roman'; font-size: 15px; font-weight: normal; color: #FFF; text-transform: uppercase; } .arrow { float: left; width: 4.2%; margin-top: 2.2%; } .body-wrapper { float: left; width: 100%; } .lbody { float: left; width: 75.3%; margin-right: 1.6%; } .content { float: left; width: 96.8%; border: 1px solid #99c3fa; padding: 1.778% 1.504% 0.957%; font-family: Arial; font-size: 13px; color: #FFF; text-align: justify; border-radius: 3px; line-height: 16px; background-color: #2e72cd; background-image: url("/Design/hoavan.png"); background-repeat: no-repeat; background-position: top right; } .content img { max-width: 100%; } .content-detail { float: left; width: 100%; } .m-read-more { float: left; width: 100%; margin-top: 2px; text-align: right; font-style: italic; color: #FFF; } .block { float: left; } .video-block { float: left; width: 35.157%; margin-right: 2.6%; margin-top: 27px; /*margin-bottom: 18px;*/ } .photo-block { float: left; width: 62.243%; margin-top: 27px; /*margin-bottom: 18px;*/ } .block-title { float: left; width: 100%; margin-bottom: 9px; } .block-title h1 { float: left; width: 100%; font-family: 'Times New Roman'; font-size: 15px; text-transform: uppercase; color: #FFF; } .block-content { float: left; border: 1px solid #99c3fa; background-color: #2e72cd; } .video-block .block-content { width: 95.5%; height: 204px; padding: 2.222%; position: relative; } .play { float: left; width: 10.778%; height: 14.509%; position: absolute; top: 42.944%; left: 45.111%; opacity: 0.2; transition: all 0.2s ease-in-out; } .play:hover, .video-block .block-content:hover .play { opacity: 1; width: 19.778%; height: 24.509%; top: 37.944%; left: 40.111%; } .photo-block .block-content { width: 97%; height: 204px; padding: 1.366%; } .photo-wrapper { float: left; width: 94.774%; padding: 3.2% 1.493% 0.64% 3.627%; background-color: #4e8fe6; height: 91%; overflow: hidden; } .photo-item { float: left; width: 31%; height: 82px; margin-right: 2.254%; margin-bottom: 2.654%; } .rbody { float: left; width: 23.1%; } .booking-block { width: 100%; } .contact-block { width: 100%; margin-top: 27px; } .contact-wrapper { float: left; width: 86.725%; height: 86.225%; padding: 6.637%; background-color: #4e8fe6; } .booking-block .block-content, .contact-block .block-content { width: 94.5%; height: 170px; padding: 2.722%; background-color: #2e72cd; } .contact-block .block-content { min-height: 203px; } .phone { float: left; width: 21.164%; margin: 5px 0; } .phone-sp { float: left; width: 100%; height: 1px; border-top: 1px solid #65a4f8; background-color: #3a7acf; } .contact-item { float: left; width: 100%; margin-top: 10px; margin-bottom: 5px; font-family: 'Times New Roman'; color: #FFF; } .c-phone, .c-name, .c-email { float: left; width: 100%; } .c-phone { font-size: 25px; font-weight: bold; } .c-name { font-size: 15px; font-weight: bold; } .c-email { font-family: Arial; font-size: 13px; } .footer { float: left; width: 100%; background-color: #002149; margin-top: 19px; border-top: 1px solid #001329; } .l-footer, .r-footer { float: left; width: 50%; } .footer-wrapper { float: left; width: 71.206%; margin-left: 13.397%; padding: 1%; font-family: Arial; font-size: 13px; color: #FFF; } .l-footer { } .l-footer p:first-child { margin-bottom: 5px; } .l-footer p:last-child { } .r-footer a { color: #FFF; } .r-footer { text-align: right; } .r-footer p:first-child { /*margin-bottom: 5px;*/ } .r-footer p:last-child { } .product-container { float: left; width: 102%; margin-top: 20px; } .check-rate-result-mess { color: #ddd491; float: left; width: 100%; font-family: UVN_ChuKy; font-size: 17px; text-align: center; margin-bottom: 10px; margin-top: -10px; line-height: 20px; } .product-box { float: left; width: 30%; margin-right: 2%; margin-bottom: 19px; padding: 0.5%; /*border: 1px solid #840404;*/ height: 306px; -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3); -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3); box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3); background-color: #FFF; position: relative; } .product-box:hover { background-color: #fcf7e8; } .product-box img { width: 100%; height: 135px; border-bottom: 1px solid #e0bbef; } .product-title { width: 100%; text-align: center; margin-top: 5px; margin-bottom: 5px; } .product-title a { /*float: left;*/ width: 100%; font-family: UTM_DINH_TRAN; font-size: 30px; color: #840404; } .product-title a:hover { color: #d03c3c; } .product-seperate { width: 100%; height: 1px; /*margin: 5px auto 7px;*/ background-color: #840404; } .product-sumary { width: 100%; margin: 15px auto 0; text-align: center; color: #6f6f6f; font-family: "UVN_Tin_Tuc_Nhe"; font-size: 14px; } .product-box .intro-readmore:hover { border: none; } .titlecategory { font-family: UTM_DINH_TRAN; font-size: 35px; color: #443d37; } .intro-readmore { background-color: #e0c34b; position: absolute; bottom: 4%; right: 32%; width: 36%; height: 30px; border-radius: 3px; background-image: url("/Design/pattern_06.png"); background-position: top right; background-repeat: no-repeat; background-size: 40% 100%; } .intro-readmore a { color: #FFF; margin-top: 7%; float: left; text-align: center; width: 100%; font-family: UVN_Tin_Tuc_Nhe; } .intro-readmore:hover { /*background-color: #f8e180;*/ } /* CSS For Room detail*/ .left-block { float: left; width: 60%; } .main-pic { float: left; height: 300px; width: 97%; margin-bottom: 5px; /*border: 1px solid #848990;*/ text-align: center; background-color: rgba(189,199,210,0.3); } .main-pic img { /*width: 100%;*/ height: 100%; max-width: 100%; /*border: 1px solid #848990;*/ border: 1px solid #848990; } .thumb-pic { float: left; width: 100%; } .thumb-item { /*border: 1px solid;*/ float: left; height: 72px; margin-bottom: 1%; margin-right: 1.5%; margin-top: 0.5%; width: 23%; } .nav-thumb { width: 100%; height: 100%; border: 1px solid #848990; } .item-active { border: 1px solid #009bd5; } .right-block { float: left; width: 39%; text-align: justify; font-family: UVN_Tin_Tuc_Nhe; } .titlepro { font-weight: bold; font-size: 15px; color: #C0C0C0; line-height: 16px; } .des-info, .fared { font-size: 15px; } .fared { } .lbdetail { float: left; font-size: 15px; margin-left: 26px; margin-top: -15px; } .contactproduct { color: #FFF; float: right; text-align: center; font-family: UVN_Tin_Tuc_Nhe; font-size: 17px; background-color: #e0c34b; width: 36%; height: 30px; border-radius: 2px; background-image: url("/Design/pattern_06.png"); background-position: top right; background-repeat: no-repeat; background-size: 40% 100%; padding-top: 2%; margin-bottom: 5%; margin-right: 3%; } .contactproduct:hover { /*background-color: #916ea0;*/ } .right-block hr { float: left; width: 97%; /*border-bottom: 1px dashed #3399FF;*/ } .right-block .line-witdth-fix-parent { text-align: left; } .pic-title { font-family: UVN_MAU_TIM_2; font-size: 23px; color: #443d37; margin-left: 1%; } /*CSS FOR Check rate*/ .check-rate-wrapper { float: left; width: 100%; } .right-footer-reservation { width: 45%; height: 216px; margin: 1% auto 2%; background-color: rgba(244,244,244,0.8); -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3); -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3); box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.3); /*background-color: rgba(189,199,210,0.8);*/ } .right-footer-reservation-wraper, .right-footer-info-wraper { width: 95%; margin: 0 auto; } .reservation-input { float: left; width: 100%; height: 25px; border: 1px solid #FFF; margin-top: 7px; margin-bottom: 7px; background-color: #dee3e9; font-family: Arial; font-size: 12px; position: relative; } .half { width: 47.3%; margin-right: 4%; } div.half:last-child { margin-right: 0; } .right-footer-reservation p { float: left; width: 100%; text-align: center; margin-bottom: 5%; height: 25px; font-family: UTM_DINH_TRAN; font-size: 45px; color: #443d37; } .select-number, .chose-date { float: left; width: 100%; height: 100%; border: none; margin: 0; padding: 0; box-shadow: none; background-color: transparent; color: #7a7877; padding-left: 5px; } .select-number { /*width: 107px;*/ } .chose-date { /*width: 162px;*/ } .input-icon { position: absolute; top: 0; right: 0; background-color: #dee3e9; height: 25px; width: 24px; } .input-icon img.date { float: left; margin-top: 5px; margin-right: 8px; } .input-icon img.number { float: left; margin-left: 13px; margin-top: 9px; } .btnCheckRate { color: #FFF; float: right; text-align: center; font-family: UVN_Tin_Tuc_Nhe; background-color: #e0c34b; width: 27%; height: 36px; border-radius: 3px; background-image: url("/Design/pattern_06.png"); background-position: top right; background-repeat: no-repeat; background-size: 40% 100%; font-size: 18px; border: none; margin-top: 1%; } 

 <form> <div class="container"> <div class="navigation"> <div class="navigation-wrapper"> <div class="nav navigation-left"> <ul><li class='active'><a href='/vn/home-12.html'> <span>TRANG CHỦ</span></a></li><li><a href='/vn/article/introduction-suoi-hong-resort-14-1.html'> <span>GIỚI THIỆU</span></a></li><li class='has-sub'><a href='/vn/danh-sach-phong-2-2.html'> <span>PHÒNG NGỦ</span></a><ul><li><a href='/vn/phong-ngu-1-2.html'> <span>Phòng một giường</span></a></li><li><a href='/vn/phong-ngu-2-2.html'> <span>Phòng hai giường</span></a></li></ul></li><li class='has-sub'><a href='javascript:void();'> <span>DỊCH VỤ</span></a><ul><li><a href='/vn/article/phuc-vu-khach-doan-23-3.html'> <span>Phục vụ khách đoàn</span></a></li><li><a href='/vn/article/dich-vu-tam-bien-24-3.html'> <span>Dịch vụ tắm biển</span></a></li></ul></li></ul> </div> <div class="logo"> <a href="/vn/home-12.html" class="link"> <h1 class="res-name line-fix-parent-width">Suối Hồng</h1> <div class="res-type line-fix-parent-width"> <span class="sp sp-left"></span> <span class="res-cat">Resort</span> <span class="sp sp-left"></span> </div> </a> </div> <div class="nav navigation-right"> <ul><li><a href='/vn/category/information-4-4.html'> <span>THÔNG TIN</span></a></li><li><a href='/vn/gallery-6.html'> <span>HÌNH ẢNH</span></a></li><li><a href='/vn/video-5.html'> <span>VIDEO -CLIPS</span></a></li><li><a href='/vn/contact-7.html'> <span>LIÊN HỆ</span></a></li></ul> </div> </div> </div> <div class="navi-hr"></div> <div class="wrapper"> </div> </form> 

See this demo it'll help.

Answer 2

The child (the menu items) inherit the parent's z-index context. In the context of the parent it has an index of 10, but it only has an index of 2 within the page as the navigation does.

If it's possible, remove the z-index of your navigation. Alternatively, place the logo inside navigation and it will be inside the same context as your block menu.

Answer 3

The problem is that you either have the logo over the menus or you have the navigation background over the logo.

If you don't want to change your html, one thing you could do is make the navigation background transparent and apply the color to its parent.