z-index not effect with child element - html

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.