0

我正在尝试创建一个带有 css3 下拉菜单的按钮....我已经尝试了几种不同的方法来做到这一点....都有一个问题,它们是在下面的元素下分层的....我已经采取了此代码来自网络上的示例......在许多示例中,代码出现在前面......我的代码有问题......我认为这是 z-index....但需要一些关于在哪里寻找问题的指针。

如果您在将鼠标悬停在“按钮”上时查看操作“按钮”,则下拉菜单位于其他代码后面......

这里是 jsfiddle 上代码的指针。 http://jsfiddle.net/n3Zwm/

这是代码

 <!DOCTYPE html>
 <html lang="en">

<body>
 <div>
    <section>




<form action="/Vehicle/Info/VinInquiry" method="post">    <div class="divTable"  >
    <div class="divTableRow">
        <div class="divTableCell"><label>VIN</label> </div>
        <div class="divTableCell">
              <input id="VIN" name="VIN" type="text" value="" />      
        </div>
         <div class="divTableCell"> <input type="submit"  value="Display" />  </div>



        <select name="Attachments">
            <option>Attach a File</option>
        </select>

        <div class="divTableCell"> <input type="submit"  value="Clear"  />  </div>
        <div class="divTableCell"> <input type="submit"  value="Email"  />  </div>
    </div>
  </div>
  <div class="divTable">
   <div class="divTableRow">
       <div class="divTableCell">
            <ul id="nav">
                <li>
                    <a href="#">Actions</a>
                    <ul>
                        <li><a href="#">Add      Comment</a></li>
                        <li><a href="#">Add      Allocation</a></li>
                        <li><a href="#">Change   Allocation</a></li>
                        <li><a href="#">Cancel   Allocation</a></li>
                        <li><a href="#">Edit     Dealer</a></li>
                        <li><a href="#">Change   Hotrush Status</a></li>
                        <li><a href="#">Relocate Vehicle</a></li>
                        <li><a href="#">Add      Service Request</a></li>
                        <li><a href="#">????     Ship Voyage Entry</a></li>
                        <li><a href="#">Goto     Process Manager</a></li>
                        <li><a href="#">Cancel   WorkOrder          (Grid based)</a> 
                        </li>
                        <li><a href="#">Change   WorkOrder Priority (Grid based)
                        </a></li>
                        <li><a href="#">Undo     WorkOrder          (Grid based  </a>
                        </li>
                    </ul>
                </li>
            </ul>
       </div>
   </div>
 </div>




 <section>
 <div class="layer1">
    <p class="heading">General Vehicle Info (Status:  )</p>
    <div class="content">
        <div class="cols">
            <div class="col1">



                 <section class="chunk">
                    <fieldset>
                        <legend class="hd">
                             <span class="text">Receiving Info</span>
                         </legend>


                        <div class="vinTable">
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Voyage: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Vessel: </label> </div>
                                 <div class="vinTableCell"> <label> (  )</label>    </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Date: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Surveyed: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                       </div>

                    </fieldset>
                 </section>

                   <br />


                   <div class="group">
                        <div class="vinTable">
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Location: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Employee: </label> </div>
                                 <div class="vinTableCell"> <label></label>    </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Date: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                       </div>
                   </div>

                  <br />


                   <div class="group">
                        <div class="vinTable">
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Carrier: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Load#: </label> </div>
                                 <div class="vinTableCell"> <label> - </label>    </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Type: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Ramp: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                       </div>
                   </div>
            </div>
            <div class="col2">



                   <div class="group">
                       <div class="vinTable">
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Model: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Color: </label> </div>
                                 <div class="vinTableCell"> <label></label>    </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Options: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                       </div>
                   </div>

                   <br />


                   <div class="group">
                       <div class="vinTable">
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Status: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>HotRush: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>BillTo: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>ShipTo: </label> </div>
                                 <div class="vinTableCell"> <label></label>    </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Dealer: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Sales Type: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>AllocationDate: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>ShippingAuth: </label> </div>
                                 <div class="vinTableCell"> <label>0</label>  </div>
                            </div>
                       </div>
                   </div>
            </div>
            <div class="col3">


                   <div class="group">
                       <div class="vinTable">
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Category: </label> </div>
                                 <div class="vinTableCell"> <label> ()</label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Status: </label> </div>
                                 <div class="vinTableCell"> <label> - </label>    </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Status: </label> </div>
                                 <div class="vinTableCell"> <label> - </label>  </div>
                            </div>
                       </div>
                   </div>

                   <br />


                   <div class="group">
                       <div class="vinTable">
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Pkn No: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Check8 Date: </label> </div>
                                 <div class="vinTableCell"> <label></label>    </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Maint Ref Date: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Car Covered: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Factory SP: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Sp Installed: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>ProductionYN: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>ProdSchedDate: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                       </div>
                   </div>
            </div>
            <div class="col4">



                   <div class="group">
                       <div class="vinTable">
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Vin17: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Commission#: </label> </div>
                                 <div class="vinTableCell"> <label> (Yr: 0)</label>    </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Archived Veh: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>Control Veh: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>ControlVehRecDate: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>ReleaseRecord: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>TentativeSchedDate: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                            <div class="vinTableRow">
                                 <div class="labelTableCell"> <label>ServiceRequest: </label> </div>
                                 <div class="vinTableCell"> <label></label>  </div>
                            </div>
                       </div>
                   </div>
            </div>
        </div>
    </div>
 </div>
 </section>


  </form>



  <style>
    .ScanVINTextBoxStyle3 { width: 180px; }
    .vinTable       { width: 100%; height:  10%; display: table; }
    .vinTableRow    { width: 100%; height: 100%; display: table-row;}
    .labelTableCell { width: 50px; height: 100%; display: table-cell;}
    .vinTableCell   { width: 100%; height: 100%; display: table-cell;}

    .group {border: solid thin; background: #EEEEEE; color: black; padding: 0.5em 1em; }

    .cols { width:1800px; }
    .col1, .col2, .col3, .col4 { width:350px; margin:0 5px; padding:10px; float:left; }




            .chunk {
                background:#ccf;
                border:0.2em solid #99c;
                border-top-left-radius:0.8em;
                border-top-right-radius:0.8em;
                display:block;
                margin-bottom:2em;
                overflow:hidden;
                position:relative;
            }
            .chunk fieldset {
                border:none;
                margin:0;
                padding:0;
            }
            .chunk legend {
                border:none;
                margin:0;
                padding:0;
            }
                .chunk .hd {
                    display:block;
                    padding:0.5em 0 0.3em;
                    width:100%; /* For IE8 */
                }
                    .chunk .hd .text {
                        color:#003;
                        font-family:helvetica,arial;
                        font-size:138.5%;
                        font-weight:normal;
                        margin:0 0.5em;
                        white-space:normal;
                        display:block;zoom:1; /* For IE7 */
                    }
                .chunk .bd {
                    background: #eef;
                    border-top:0.2em solid #99c;
                    padding:1em 0.5em;
                }
                .chunk ol {
                    margin:0;
                    padding:0;
                }
                .chunk .fields li {
                    list-style-type:none;
                    margin-bottom:1em;
                    overflow:hidden;
                    position:relative;
                }
                .chunk .list li {
                    background:#edf;
                    color:#336;
                    padding:0.2em;
                }
                .chunk .list li:nth-child(2n) {
                    background:#dce;
                }
                .chunk .fields .label {
                    float:left;
                    font-size:108%;
                    width:25%;
                }
                .chunk .fields .field {
                    font-size:108%;
                    margin-left:30%;
                    padding-right:7px;
                    position:relative;
                }
                    .chunk .fields .field input[type=text]{
                        width:100%;
                    }
                    .chunk .fields .field.tiny input[type=text]{
                        width:5em;
                    }
                    .chunk .fields .field.date input[type=text]{
                        width:7em;
                    }
                    .chunk .fields .field.small input[type=text]{
                        max-width:17em;
                    }
                    .chunk .fields .field textarea {
                        height:6em;
                        width:100%;
                    }



    .layer1
     {
     margin  : 0;
     padding : 0;
     width   : 1550px;
     }

    .heading
    {
     margin          : 1px;
     color           : #fff;
     padding         : 3px 10px;
     cursor          : pointer;
     position        : relative;
     background-color: #c30;
    }

    .content
    {
     padding         : 5px 10px;
     background-color: #fafafa;
    }

   p
   {
     padding: 5px 0;
   }




  /*------------------------------------*\
    RESET
\*------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}
table{
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img{
    border:0;
}
address,caption,cite,code,dfn,th,var{
    font-style:normal;
    font-weight:normal;
}
caption,th{
    text-align:left;
}
h1,h2,h3,h4,h5,h6{
    font-size:100%;
    font-weight:normal;
}
q:before,q:after{
    content:'';
}
abbr,acronym{
    border:0;
}




/*------------------------------------*\
    NAV
\*------------------------------------*/
#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    /* Clear floats */
    float:left;
    width:100%;
    /* Bring the nav above everything else--uncomment if needed.
    position:relative;
    z-index:5;
    */
}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}

/*--- DROPDOWN ---*/
#nav ul{
    background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
    padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:none;
}
#nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background:#6b0c36;
    text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background:#333;
}





.ScanVINTextBoxStyle3 { width: 180px; }
.divTable     { width: 35%; height:  10%; display: table; }
.divTableRow  { width: 100%; height: 100%; display: table-row;}
.divTableCell { width: 25%;  height: 100%; display: table-cell;}
</style>



  </section>
  </div>

</body>
</html>
4

1 回答 1

1

是的,先生,它是z-index,只需像这样添加它:

#nav li:hover ul {
left: 0;
z-index: 22222;
}

演示:http: //jsfiddle.net/n3Zwm/10/

于 2013-08-26T19:25:58.723 回答