Question

这是我的代码

<!DOCTYPE HTML>
<html>
<head>
<style type ='text/css'> 
*
{
    font-family:Arial, Helvetica, sans-serif;
    color:#333;
    font-size:12px;


}
IMG
{
    display:block;
}
A
{
    text-decoration:none;
    color:#ffffff !important;
}

    BODY
    {
        background:url('./../images/bg.jpg') #eeeeee fixed;
        background-position:fixed;
        width:100%;
        height:650px;
        margin:0px;
        padding:0px;
        overflow:scroll;

    }
    #menuHolder{
        width:100%;
        height:5%;
        background:rgba(0,0,0,0.8);
        background: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.1));
        background: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.1));
        background: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.1));
        background: -o-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.1));
        color:#cdcdcd;

    }
    #holder{
        width:80%;
        height:110%;
        background:transparent;
        margin-left:auto;
        margin-right:auto;
        margin-top:5%;
        border:solid 1px #000000;
    }
    #contentHolder{
    background:rgb(250,250,250);
        background:rgba(250,250,250,0.5);
        width:96.1%;
        height:94%;
        //height:auto;
        padding:2%;

    }
    ul{
        list-style:none !important;
        margin-top:0 !important;
        margin-left:auto;
        margin-right:auto;
        padding-left:0 !important;
    }

    #mainUl{
        background:transparent;
        width:100%;
        height:100%;
        font-family: 'Lucida Console', Monaco, monospace;
    }
    #mainUl li{
        float:left; 
        width:16.6%;
        height:75%;
        text-align:center;
        padding-top:0.8%;
        cursor:pointer;
        -webkit-transition:background 1s;
        -moz-transition:background 1s;
        -o-transition:background 1s;
        -ms-transition:background 1s;

    }
    #mainUl li:hover{

        background:rgba(255,255,255,0.8);
        border-top-left-radius:4px;
        border-top-right-radius:4px;

    }

    #mainUl li ul{
        margin-top:5% !important;
        width:100%;
        height:0px;
        background:transparent;

        -webkit-transition:height 1s;
        -moz-transition:height 1s;
        -o-transition:height 1s;
        -ms-transition:height 1s;


    }
    #mainUl li:hover ul{
        background:rgba(255,255,255,0.8);
        height:200px;
        border-bottom-left-radius:4px;
        border-bottom-right-radius:4px;



    }
    #mainUl li ul li{ 
        height:12%;
        width:100%;
        color:transparent;
        padding-top:10%;
        -webkit-transition:color 1s;
        -moz-transition:color 1s;
        -o-transition:color 1s;
        -ms-transition:color 1s;
    }
    #mainUl li:hover ul li{
        color:#000000;
    }
    .contentDiv{
        width:24%;
        height:92%;
        border:solid 1px #000000;
        float:left;
        margin-left:2%;
    }
    .featured{
        width:100%;
        height:60%;
        margin-left:0 !important;
    }


</style>
</head>
<body>

<div id = 'holder'>
    <div id = 'menuHolder'>
        <ul id = 'mainUl'>
            <li>HOME</li>
            <li>NEWS
                <ul>
                    <li>PC</li>
                    <li>MOBILE</li>
                    <li>WEB</li>
                    <li>TABLET</li>
                </ul>
            </li>
            <li>ARTICLES
                <ul>
                    <li>PC</li>
                    <li>MOBILE</li>
                    <li>WEB</li>
                    <li>TABLET</li>
                </ul>
            </li>
            <li>DOWNLOADS</li>
            <li>TECH WIKI</li>
            <li>LOGIN</li>
        </ul>
    </div>
    <div id = 'contentHolder'>
        <div class = 'contentDiv' style = 'width:73.6%;margin-left:0px !important;border:none;'>
            <div class = 'contentDiv featured' > 
            </div>
            <div class = 'contentDiv featured' style = 'margin-top:2.4%;height:37%;'>
            </div>

        </div>
        <div class = 'contentDiv'>t
        </div>
    </div>
</div>


</body>

</html>

我无法悬停列表项Mobile，Web，Tablet。但是当我删除class = contentDiv的分区时我可以将其悬停。为什么会发生这种情况？是否与z-index相关？。请建议解决方案

一个实例：http://jsfiddle.net/QSkps/1/

Answer 1

是的，将position:relative; z-index:1添加到#mainUl的样式中。

但如果您已经认为可能是这种情况，为什么不在发布之前自己尝试？

CSS无法正常工作

1 个答案: