Question

好吧不确定我给了这个好头衔。本质上，我试图在表格中仅执行css下拉菜单。这似乎对我来说很好，除非下面的行也有一个菜单。然后顶部菜单列出其下一行菜单下面的菜单项幻灯片。

由于两个菜单（UL）共享同一个类，因此它们获得相同的z-index。里面的LI项目似乎没有从父UL继承/增加z-index，即使我将它们设置为更高的z-index，它们仍然会在下面滑动。

我在这里展示了一个小提琴：

很抱歉，如果代码不够小，我会花很多钱，但看起来仍然很乱

HTML

<table width="100%" style="font-size:10px">
   <tr class="onhold-row details ">
      <td style="text-align:center;">Mon Jul 22 2012</td>
      <td style="text-align:center;">Craig</td>
      <td style="padding:5px 0px 5px 10px;">Helpdesk</td>
      <td style="text-align:center;">Car</td>
      <td style="text-align:center;width:20%">
         <ul class="actions">
            <li><a class="unbillable button" style="cursor:pointer;">Discard</a></li>
            <li class="onhold button active">On Hold</li>
            <li><a class="billable button" style="cursor:pointer;" >Chargable</a></li>
         </ul>
      </td>
   </tr>
    <tr><td>Example of a spacing row<br/>Example of a spacing row<br/>Example of a spacing row<br/>Example of a spacing row<br/>Example of a spacing row<br/>Example of a spacing row<br/><td></tr>
   <tr class="onhold-row details ">
      <td style="text-align:center;">Sat Jul 24 2012</td>
      <td style="text-align:center;">John</td>
      <td style="padding:5px 0px 5px 10px;">Helpdesk</td>
      <td style="text-align:center;">Bus</td>
      <td style="text-align:center;">
         <ul class="actions">
            <li><a class="unbillable button" style="cursor:pointer;" >Discard</a></li>
            <li class="onhold button active">On Hold</li>
            <li><a class="billable button" style="cursor:pointer;"  >Chargable</a></li>
         </ul>
      </td>
   </tr>
   <tr class="onhold-row details ">
      <td style="text-align:center;">Sun Jul 28 2012</td>
      <td style="text-align:center;">Paul</td>
      <td style="padding:5px 0px 5px 10px;">Helpdesk</td>
      <td style="text-align:center;">Taxi</td>
      <td style="text-align:center;">
         <ul class="actions">
            <li><a class="unbillable button" style="cursor:pointer;" >Discard</a></li>
            <li class="onhold button active">On Hold</li>
            <li><a class="billable button" style="cursor:pointer;"  >Chargable</a></li>
         </ul>
      </td>
   </tr>
</table>

CSS

td.ticket,
tr.inv-row td,
tr.col-row td,
tr.bill-row td,
tr.unbill-row td,
tr.open-row td,
tr.onhold-row td {  position:relative; }
.actions {padding:2.5em 0 0 0;height:0;overflow:visible;position:relative;z-index:1000;margin:0;}
.actions li{display:none;padding: 1em;background-color:#FFF;box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.11);position:relative;z-index:1001;}
.actions:hover li{display:block;}
.actions a.button {display:block;margin:0 0.5em;}
.actions .button.active {color:#FFF;border-radius:20px;padding: 0.5em 1.75em;display:block;position:absolute;top:0;left:0;right:0}
.actions .button.active::after{width: 0; height: 0; content:".";font-size:1em;overflow:hidden;border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #FFF;position: absolute;right: 1.25em;top: 0.8em;}    
td.ticket {padding:5px 0px 8px 10px;font-size:1.2em;}    
tr.inv-row td:first-child:before   {  background-color:green;width: 7px;  content: ".";font-size:0; position:absolute; top:-1px;left:-1px;bottom:-1px;}
.inv-row.details td{background-color:#e8ffe8}    
tr.col-row td:first-child:before   {  background-color:orange;width: 7px;  content: ".";font-size:0; position:absolute; top:-1px;left:-1px;bottom:-1px;}
.col-row.details td{background-color:#ffb97e}  
.tix-on-bill.ticket, .tix-on-bill.ticket a {color:#006392 !important;background-color:#D0F0FF;}
.tix-on-bill.ticket:before {  background-color:#50C3FF;width: 100%;  content: ".";font-size:0; position:absolute; height:4px;left:-1px;bottom:-1px;}
.bill-row .comment {}
.bill-row.details td{background-color:#F0F9FD}
tr.bill-row td:first-child:before   {  background-color:#50c3ff;width: 7px;  content: ".";font-size:0; position:absolute; top:-1px;left:-1px;bottom:-1px;}
.billable.active {background-color:#50c3ff;}    
.unbill-row.details td{background-color:#F8F7F7; color: #bbb;}
.unbill-row .comment{ color: #bbb;}
tr.unbill-row td:first-child:before {  background-color:#ccc;width: 7px;  content: ".";font-size:0; position:absolute; top:-1px;left:-1px;bottom:-1px;}
.unbillable.active {background-color:#999;}    
.tix-opened.ticket, .tix-opened.ticket a {color:#4500AD !important;background-color:#e7d0ff;}
.tix-opened.ticket:before {  background-color:#9933ff;width: 100%;  content: ".";font-size:0; position:absolute; height:4px;left:-1px;bottom:-1px;}
.open-row.details td{background-color:#fef2ff;}
tr.open-row td:first-child:before {  background-color:#9933ff;width: 7px;  content: ".";font-size:0; position:absolute; top:-1px;left:-1px;bottom:-1px;}    
.onhold-row.details td{background-color:#fef2ff;}
tr.onhold-row td:first-child:before {  background-color:#9933ff;width: 7px;  content: ".";font-size:0; position:absolute; top:-1px;left:-1px;bottom:-1px;}
.onhold.active {background-color:#9933ff;}    
.inv-row .comment, .col-row .comment {}
.open-row .comment, .onhold-row .comment{}

Answer 1

更新您的CSS，如下所示。我已移除z-index的{{1}}，并为main ul添加z-index个。{/ p>

button li

DEMO

Answer 2

删除一条css规则

.actions {
padding: 2.5em 0 0 0;
height: 0;
overflow: visible;
position: relative;
/* z-index: 99999999999999999; */
margin: 0;
}

CSS只有下拉菜单，可以重叠自己的类

2 个答案: