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>

Я не могу парить элементы списка Mobile, Web, Tablet.But я могу парят, когда подразделения, имеющие класс = contentDiv removed.Why это происходит? Является ли ? это что-то связанное с Z-индекс .Please предложить решение

живой пример: http://jsfiddle.net/QSkps/1/

источник

2012-02-28 Jinu Joseph Daniel

Возможно, вам лучше использовать jquery. Это также означает, что ваш сайт будет по-прежнему работать и с более старыми браузерами. – Alex

Пожалуйста, создайте http: //jsfiddle.net/... делает намного проще визуализировать CSS. –

Помимо вашего вопроса, вы знаете, что события наведения не имеют никакого значения в текущем состоянии сети с сенсорными устройствами? – ikanobori

Да, добавляя position:relative; z-index:1 к стилю для #mainUl работ.

Но если вы уже подумали, что это может быть так, почему бы вам не попробовать себя перед отправкой здесь?

источник

2012-02-28 10:33:46

i try z-index: 1; но не сработало. Похожее место: родственник здесь? –

Поскольку z-индекс работает только с позиционированными элементами. См. Http://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html –

@JinuJD Z-index работает только с 'position: relative' или' position: absolute' –

CSS не работает должным образом

ответ

Смежные вопросы