z-index 不影响子元素

Question

但徽标后面显示的菜单块。

.navigation class 位置是绝对的，z-index 是 3。徽标的位置是绝对的。 z-index 是2。block 的z-index 是10。但是菜单块不能显示在logo 前面。

请帮我解决这个问题！

*
{
    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

子项（菜单项）继承父项的 z-index 上下文。在父级的上下文中，它的索引为 10，但它在页面中的索引仅为 2，就像导航一样。

如果可能，请删除导航的 z-index。或者，将徽标放在导航中，它将与您的块菜单位于相同的上下文中。

Answer 2

问题是您在菜单上有徽标，或者在徽标上有导航背景。

如果您不想更改 html，您可以做的一件事是使导航背景透明并将颜色应用于其父项。

Answer 3

*
{
    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>

看看这个演示会有帮助。

z-index 不影响子元素

z-index not effect with child element

html

css

z-index