Вот мой код
<!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/