Element OverLap：下拉菜单不与内容重叠，而是将它们向下推答案

【问题标题】：Element OverLap: DropDown Menu not overlapping the contents, instead pushes them downElement OverLap：下拉菜单不与内容重叠，而是将它们向下推
【发布时间】：2014-04-30 17:14:59
【问题描述】：

我有一个下拉菜单，单击该菜单时，会将其下方的内容推送到其下方，以便为其项目腾出空间。但是，我希望下拉列表与下面的内容重叠而不将其向下推。

我尝试了几件事，但它们都不起作用，包括下拉列表中的 z-index:1;。

  <td valign="top" class="navigationLink" style="width: 20%" >

                    <div class="reportDiv">
                        <h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>


                        <ul class="reportUL" >
                            <li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
                            <li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
                        </ul>
                    </div>
                    </td>

这是下拉菜单。这形成了我放置网页内容的表格的一行。当我点击 My Account 标签时，ul 会下降，并且表格 行的 height 会增加 并推动它下面的行。我希望下拉菜单与下一行内容重叠。我该怎么做？

下面和上面还有一些代码

 <div class="container">
            <!-- this is where the webpages starts from. The below table is where the main contents are  -->
            <table  border="0" cellpadding="2" style="width: 100%; ">

                <tr style="background-color: #95D0CA;">
                  <!-- contains header of page -->
                    <td colspan="2">
                   </td>
                </tr>

           <tr style=" position: relative; z-index:1;">
            <td colspan="2" valign="top">

       <!-- THIS IS WHERE I HAVE ADDED A NEW TABLE TO CONTAIN THE MENU ITEMS. THE DROP DOWN IS A (td) OF THIS TABLE -->       

         <table border="0" cellspacing="2" cellpadding="2" class="templateBody" style="width: 100%;">

                <tr >

               <td> 
                     <!-- other menu items -->
              </td>

             <!-- DROP DOWN -->
               <td valign="top" class="navigationLink" style="width: 20%" >

                    <div class="reportDiv">
                        <h:outputLabel value="Report" rendered="#{welcomeBean.report}" class="reportMenu"/>


                        <ul class="reportUL" >
                            <li><h:link value="Project Wise Report" outcome="/webpages/ProjectWiseReport.xhtml" rendered="true" class="reportItems"/></li>
                            <li><h:link value="Employee Wise Report" outcome="/webpages/EmployeeWiseReport.xhtml" rendered="true" class="reportItems"/></li>
                        </ul>
                    </div>
                    </td>    


                     </tr> 
              </table>
           </td>
        </tr> 


         <!-- NOW the Row which gets pushed down appears -->
        <tr>

           <td  colspan="2" valign="top"  style="width: 100%">

             <div class="contentBody">

             </div>

          </td>
        </tr> 

      </table>
        </div>

我将展示它的外观。这可能会引导你们理解我的问题。

下拉菜单展开前的图片下方： !(http://imgur.com/QauRGVc)

图片下拉展开后： !(http://imgur.com/VMlcCbp)

我已经尝试过使用 jsFiddle，正如你们中许多人所建议的那样，但它并没有按原样显示我的代码。所以这没有达到目的。我希望这个编辑有所帮助。

请帮助我。如果您需要其他代码，请告诉我。 ** 提前谢谢你:)**

**Edit**

添加 CSS 和 JAVA 脚本代码

我提供的代码的 CSS 代码

 .navigationLink a
 {
  background-color: #95D0CA;
  margin-top: 5px;
  margin-bottom: 5px;
 }

 .navigationLink label
 {
 background-color: #95D0CA;
  margin-top: 5px;
 margin-bottom: 5px;
 }


   .reportMenu
   {
   text-decoration: none;
    color: #216961;
   font-weight: bold;
   font-size: 15px;
   display: block;
   padding: 10px 5px 10px 5px;
   text-align: center;  
   cursor: pointer;
   }

 .reportItems
 {
    color: white; 
    text-decoration: none;
    font-weight: 400;
    font-size: 15px;
    padding: 10px;
   background-color: #95D0CA;
   text-align: center;
 }

  .container
  {
   width: 1000px;
   background-color: whitesmoke;
   padding: 10px;
   margin: 50px auto;
   position: relative;
  }

 .templateBody
 {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    width: auto;
 }

 .templateBody td
 {
    text-align:center;
 }

 .contentBody
 {
    background-color: whitesmoke;           
    margin: 10px 0px 10px 0px;
    width: 100%;
    position: relative;
    clear: both;
 }

   .reportUL
 {
   list-style-type: none;
    position: absolute;
   z-index: 1;
    padding: 0;
   margin: 0;
   text-align: left;

 }

 .reportUL li
 {
  background-color: #95D0CA;
 }

JQUERY 代码

           $(document).ready(function()
    {   
        $(".img, #img").show();
        $("#loginWindow").hide();
        $("#loginSlide").show();
       $(".reportItems").hide();
         $(".reportItems1").hide();

        $("#loginSlide").click(function()
        {
            $("#loginWindow").slideToggle(200);
        });
        $(".toDate").datepicker();

        $(".fromDate").datepicker();

       $( "#accordion" ).accordion({
          collapsible: true
        });



        $(".reportDiv").hover(function()
        {
            $(".reportItems").slideToggle(150);
        });

        $(".accountDiv").hover(function()
        {
            $(".reportItems1").slideToggle(150);
        });


        $(".mainLinks, .reportMenu, .reportItems, .reportMenu1, .reportItems1  ").hover(function()
        {
            $(this).css({"text-shadow":"0px 0px 5px #FFFFFF"});
        }, function(){
            $(this).css("text-shadow","none");
        });



    });

【问题讨论】：

制作一个小提琴或发布更多代码怎么样
你需要什么样的代码？更多的 HTML 或 CSS 或 JQuery？
我添加了更多代码。请看看这是否有助于您更多地了解问题。 :)
请您为它创建一个小提琴。您提供的代码不足。看看你的代码jsfiddle.net/uT56M/3
jsfiddle.net/uT56M/4

标签： javascript jquery css drop-down-menu xhtml

【解决方案1】：

看看下面的小提琴。

这些是您可以构建的一些不错的drop down menu's

Fidde 1

Fiddle 2

【讨论】：

哦，真的很酷！谢谢！我现在可以改进我的了！ :) 非常感谢！

【解决方案2】：

我只需要将以下CSS属性添加到reportUL的类中无序列表（ul）我用来添加下拉菜单：

在下面的内容上重叠下拉所需的属性是：

 position: absolute;

并使其显示上方 / 顶部我使用的以下内容：

z-index: 1;

该类的完整且正确的 CSS 是：

     .reportUL
{
   list-style-type: none;
    position: absolute;
   z-index: 1;
    padding: 0;
   margin: 0;
   text-align: left;

}

【讨论】：