元素重叠:DropDown菜单不与内容重叠,而是将它们向下推

时间:2014-04-28 08:33:38

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

我有一个下拉菜单,当点击它时,会推动其下方的内容为其项目腾出空间。 但是我希望下拉内容与下面的内容重叠而不会将其向下推。

我尝试了几件事,但他们没有工作,包括下拉列表中的 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>    

这是下拉列表。这形成了表格的一行,其中我放置了网页的内容。 当我点击我的帐户标签时, ul 会下拉,并且表格的行的高度会增加并将其下方的行向下推。 我希望下拉列表与下一行内容重叠。我该怎么做?

在其下方及其上方添加更多代码

 <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 SCRIPT代码

我提供的代码的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 CODE

           $(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");
        });



    });

2 个答案:

答案 0 :(得分:0)

看看下面的小提琴。

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

<强> Fidde 1

<强> Fiddle 2

答案 1 :(得分:-1)

我只需要将以下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;

}