CSS工作不正常

这里是我的代码CSS工作不正常

<!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>

我不能悬停列表项移动，网络，Tablet.But我可以将鼠标悬停时，它具有类的分歧= contentDiv removed.Why会出现这种情况？是？它用z-index。请有关的东西提出一个解决方案

一个活生生的例子：http://jsfiddle.net/QSkps/1/

来源

2012-02-28 Jinu Joseph Daniel

你可能会更好地使用jQuery。这也意味着您的网站仍然可以在旧版浏览器上运行。 – Alex 2012-02-28 10:27:04

请创建一个http：//jsfiddle.net/...使其更容易可视化CSS。 – 2012-02-28 10:27:45

除了你的问题，你知道悬停事件在网络的当前状态与触摸设备无关吗？ – ikanobori 2012-02-28 10:33:48