Перекрытие текста CSS.Z-Index не работает - PullRequest
Новая
       21

Перекрытие текста CSS.Z-Index не работает

0 голосов
/ 13 декабря 2018

У меня есть многоуровневое меню внутри таблицы с фоновым изображением.Проблема в том, что меню нового уровня перекрывает текст друг с другом.Я пытался сделать это с уровнями z-index, но у меня ничего не вышло.

Пример изображения: https://i.ibb.co/ZK1TnJv/Sin-t-tulo-1.png

Код: 

<html>
<head>
</head>
<body>
<style>
.third-level-menu
{
    position: absolute;
    top: 0;
    right: -120px;
    width: 178px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menux2     /* Variation of third level with different position */
{
    position: absolute;
    top: 0;
    right: -140px;
    width: 178px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li
{
    height: 40px;
    background: #c39cad;
}

.third-level-menux2 > li
{
    height: 40px;
    background: #c39cad;
}
.third-level-menu > li:hover { background: #8e5e73; }
.third-level-menux2 > li:hover { background: #8e5e73; }

.second-level-menu
{
    position: absolute;
    top: 30px;
    left: 0;
    width: 178px;
    list-style: none;
    padding: 3;
    margin: 0;
    display: none;
}

.second-level-menu > li
{
    position: relative;
	top: 10px;
    height: 32px;
    background: #c39cad;

}
.second-level-menu > li:hover { background: #8e5e73; }

.top-level-menu
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li
{
    position: relative;
    float: left;
    height: 30px;
    width: 120px;
    background: #d3b0bc9;
}
.top-level-menu > li:hover { background: #d3b0bc9;  }

.top-level-menu li:hover > ul
{
    /* On hover, display the next level's menu */
    display: inline;
	
}


/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
    font: bold 13px Arial, Helvetica, sans-serif;
    color: #ffffff;
    text-decoration: none;
    padding: 0 0 0 10px;
	
    
    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 18px;
}
.top-level-menu a:hover { color: #ffffff; 
    </style>
<body>

<table background="https://i.ibb.co/KNpk9Md/demo.jpg" width="917" border="0">
  <tr>
    <td width="103" height="244" rowspan="7">      
    <td width="117" rowspan="3">    
    <td width="81" rowspan="7">    
    <td width="123" height="21">    
    <td width="75" rowspan="7">    
    <td width="128" rowspan="2">    
    <td width="65" rowspan="7">    
    <td width="128" rowspan="2">    
    <td width="59" rowspan="7">      </tr>
  <tr>
    <td height="32"><ul class="top-level-menu">
     <li>
        <a href="#">PE02 Plan gestión</a>
        <ul class="third-level-menux2">
            <li><a href="#">Procedimiento</a></li>
           
                </ul>
              </li>
         </ul>
     </li>
</ul>    
  </tr>
  <tr>
    <td>        
    <td width="128">5          
    <td width="128">7      
  </tr>
  <tr>
    <td width="117"><ul class="top-level-menu">
     <li>
        <a href="#">OPE01 Plan estratégico</a>
        <ul class="second-level-menu">
            <li><a href="#">Procedimiento</a></li>
                   <li>
                <a href="#">REGISTROS</a>
                <ul class="third-level-menu">
                    <li><a href="#">Seguimiento y Evaluación</a></li>
                   
                </ul>
              </li>
         </ul>
     </li>
</ul>        
    <td height="43"><ul class="top-level-menu">
     <li>
        <a href="#">PE03 Inversiones y nuevos proy.</a>
        <ul class="second-level-menu">
            <li><a href="#">Procedimiento</a></li>
            <li><a href="#">Instrucción Responsable</a></li>
            <li>
                <a href="#">REGISTROS</a>
                <ul class="third-level-menu">
                    <li><a href="#">Metáfora Empresa</a></li>
                    <li><a href="#">Planificación Proyecto</a>			 
                    <li><a href="#">Requisitos Proyecto</a></li>
                </ul>
              </li>
         </ul>
     </li>
</ul>        
    <td width="128">          
    <td width="128">      </tr>
  <tr>
    <td width="117">    
    <td height="21">        
    <td width="128">6          
    <td width="128">8      
  </tr>
  <tr>
    <td width="117">    
    <td height="38"><ul class="top-level-menu">
    <li>
        <a href="#">PE04 Responsab. social</a>
        <ul class="second-level-menu">
            <li><a href="#1">Procedimiento</a></li>
            <li><a href="#">REGISTROS</a></li>
                <ul class="third-level-menu">
                    <li><a href="#">Cumplimiento Comunicaciones GI</a></li>
                    <li><a href="#">Temas y Canales GI</a></li>
                </ul>
          
         </ul>
     </li>
</ul>   
     
    <td width="128">          
    <td width="128">      </tr>
  <tr>
    <td width="117">    
    <td height="23">        
    <td width="128">          
    <td width="128">      </tr>
</table>

</body></html>

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018 
.second-level-menu{z-index: 5;}

Можете ли вы добавить z-index: 5; в .second-level-menu код CSS.Надеюсь, это поможет вам.

0 голосов
/ 13 декабря 2018

я добавил z-index:5 для .second-level-menu

<html>
<head>
</head>
<body>
<style>
.third-level-menu
{
    position: absolute;
    top: 0;
    right: -120px;
    width: 178px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menux2     /* Variation of third level with different position */
{
    position: absolute;
    top: 0;
    right: -140px;
    width: 178px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li
{
    height: 40px;
    background: #c39cad;
}

.third-level-menux2 > li
{
    height: 40px;
    background: #c39cad;
}
.third-level-menu > li:hover { background: #8e5e73; }
.third-level-menux2 > li:hover { background: #8e5e73; }

.second-level-menu
{
    position: absolute;
    top: 30px;
    left: 0;
    width: 178px;
    list-style: none;
    padding: 3;
    margin: 0;
    display: none;
  z-index:5;
}

.second-level-menu > li
{
    position: relative;
	top: 10px;
    height: 32px;
    background: #c39cad;

}
.second-level-menu > li:hover { background: #8e5e73; }

.top-level-menu
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li
{
    position: relative;
    float: left;
    height: 30px;
    width: 120px;
    background: #d3b0bc9;
}
.top-level-menu > li:hover { background: #d3b0bc9;  }

.top-level-menu li:hover > ul
{
    /* On hover, display the next level's menu */
    display: inline;
	
}


/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
    font: bold 13px Arial, Helvetica, sans-serif;
    color: #ffffff;
    text-decoration: none;
    padding: 0 0 0 10px;
	
    
    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 18px;
}
.top-level-menu a:hover { color: #ffffff; 
    </style>
<body>

<table background="https://i.ibb.co/KNpk9Md/demo.jpg" width="917" border="0">
  <tr>
    <td width="103" height="244" rowspan="7">      
    <td width="117" rowspan="3">    
    <td width="81" rowspan="7">    
    <td width="123" height="21">    
    <td width="75" rowspan="7">    
    <td width="128" rowspan="2">    
    <td width="65" rowspan="7">    
    <td width="128" rowspan="2">    
    <td width="59" rowspan="7">      </tr>
  <tr>
    <td height="32"><ul class="top-level-menu">
     <li>
        <a href="#">PE02 Plan gestión</a>
        <ul class="third-level-menux2">
            <li><a href="#">Procedimiento</a></li>
           
                </ul>
              </li>
         </ul>
     </li>
</ul>    
  </tr>
  <tr>
    <td>        
    <td width="128">5          
    <td width="128">7      
  </tr>
  <tr>
    <td width="117"><ul class="top-level-menu">
     <li>
        <a href="#">OPE01 Plan estratégico</a>
        <ul class="second-level-menu">
            <li><a href="#">Procedimiento</a></li>
                   <li>
                <a href="#">REGISTROS</a>
                <ul class="third-level-menu">
                    <li><a href="#">Seguimiento y Evaluación</a></li>
                   
                </ul>
              </li>
         </ul>
     </li>
</ul>        
    <td height="43"><ul class="top-level-menu">
     <li>
        <a href="#">PE03 Inversiones y nuevos proy.</a>
        <ul class="second-level-menu">
            <li><a href="#">Procedimiento</a></li>
            <li><a href="#">Instrucción Responsable</a></li>
            <li>
                <a href="#">REGISTROS</a>
                <ul class="third-level-menu">
                    <li><a href="#">Metáfora Empresa</a></li>
                    <li><a href="#">Planificación Proyecto</a>			 
                    <li><a href="#">Requisitos Proyecto</a></li>
                </ul>
              </li>
         </ul>
     </li>
</ul>        
    <td width="128">          
    <td width="128">      </tr>
  <tr>
    <td width="117">    
    <td height="21">        
    <td width="128">6          
    <td width="128">8      
  </tr>
  <tr>
    <td width="117">    
    <td height="38"><ul class="top-level-menu">
    <li>
        <a href="#">PE04 Responsab. social</a>
        <ul class="second-level-menu">
            <li><a href="#1">Procedimiento</a></li>
            <li><a href="#">REGISTROS</a></li>
                <ul class="third-level-menu">
                    <li><a href="#">Cumplimiento Comunicaciones GI</a></li>
                    <li><a href="#">Temas y Canales GI</a></li>
                </ul>
          
         </ul>
     </li>
</ul>   
     
    <td width="128">          
    <td width="128">      </tr>
  <tr>
    <td width="117">    
    <td height="23">        
    <td width="128">          
    <td width="128">      </tr>
</table>

</body></html>
...