CSS文字重叠。 Z-Index不起作用

时间：2018-12-13 11:09:13

标签： html css text z-index overlap

我在带有背景图像的表格内有一个多级菜单。我的问题是新级别菜单显示的文本相互重叠时。我尝试使用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 :(得分：0)

我为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>

答案 1 :(得分：0)

.second-level-menu{z-index: 5;}

能否在z-index: 5; CSS代码中添加.second-level-menu。 希望对您有帮助。

相关问题
最新问题