Question

我有一个粘性主菜单，其中包含选项卡＆＃34;类别＆＃34;下拉菜单＆＃34; categoriesDropdown＆＃34;当我将鼠标悬停在它上面时。

我需要下拉菜单才能显示屏幕的宽度以屏幕为中心。
我需要下拉菜单粘贴在主菜单的底部。

唯一的问题是，我似乎无法将下拉菜单置于正文中心。我只能相对于父div（类别）放置它我使用的代码显示在。

下

<div class="categories">
   <a>Categories</a>
   <div id="categoriesDropdown"></div>
</div>

CSS

.categories {
    padding-left: 20px;
    padding-right: 20px;
    height: 45px;
    display: inline-block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#categoriesDropdown {
    position: absolute;
    background: #1d1d1d;
    width: 100vw;
    height: 0px;
    z-index: -1;
    overflow: auto;
}

#categoriesDropdown.show {
    height: 500px;
}

编辑：当我向左试试时会发生这种情况：0;右：0; the grey square being the drop down menu

Answer 1

仅使用CSS很棘手，但这里有jQuery和css的可能解决方案。我不确定这会对你有帮助。

身体

<div class="categories">
  <a>Categories</a>
  <div id="categoriesDropdown" class="categoriesDropdown">  </div>

Css

body{
  margin : 0px;
  padding : 0px;
  }
  .categories {
  padding-left: 20px;
  padding-right: 20px;
  height: 20px;
  display: inline-block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  cursor : pointer;
  top: 50px;
  position: absolute;
  }
  .categoriesDropdown {
  position: relative;
  background: #1d1d1d;
  width: 98vw;
  height: 0px;
  z-index:-1;
  overflow:auto;
  margin:0 auto;
  color:#fff;
  }
  .categoriesDropdown_show {
  height: 100px;
  }

脚本

$(document).ready(function(){

  var c = $(".categories");
  var position = c.position();

     $(".categories").mouseenter(function(){
        $("#categoriesDropdown").appendTo('body');
         $(".categoriesDropdown").addClass("categoriesDropdown_show");
         $('#categoriesDropdown').css({'top':'calc('+position.top +'px + 20px)'});
     });
     $(".categories").mouseleave(function(){
         $(".categoriesDropdown").removeClass("categoriesDropdown_show");
         $("#categoriesDropdown").appendTo('categories');
     });
  });

我如何将div置于BODY而不是它的父母身上

1 个答案: