Dropdown menu is dropping too low

问题: Recently I fixed my dropdown menu which used to drop with all the other un-hovered buttons also changing their positions. The current issue I just noticed accidentally. Whe...

问题:

Recently I fixed my dropdown menu which used to drop with all the other un-hovered buttons also changing their positions. The current issue I just noticed accidentally. When the page is all scrolled up, i.e. I am at starting position, dropdown works as expected. But if I scroll a little bit down, and then hover over button, the dropdown appears where it was before but I am expecting it to appear below the button. This is the snap of code I am using:

.tut_navi_buttons .drop_down_navi_content {
  display: none;
  right: 0;
  position: unset;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  height: 0px;
  transition: height 1s ease;
}

.tut_navi_buttons:hover .drop_down_navi_content {
  position: fixed;
  display: block;
  height: auto;
  /*height: auto;*/
  /*box-shadow: 0px 2px 1px grey;*/
}

#tut_navi {
  overflow: hidden;
  padding-top: 10px;
  float: left;
  padding-left: 5px;
  /*display: inline-block;*/
}

.tut_navi_buttons .drop_down_navi {
  overflow: hidden;
  border: none;
  outline: none;
  color: black;
  background-color: inherit;
}

.tut_navi_buttons {
  width: auto;
  height: 20px;
  margin: 10px;
  /*margin-bottom: 20px;*/
  /*padding: 5px;*/
  position: relative;
  display: inline-block;
}
<div id='tut_navi'>
  <div class="tut_navi_buttons">
    <button class="drop_down_navi">Python Basics <i class="fa fa-angle-down"></i></button>
    <div class="drop_down_navi_content">
      <a href="tutorial1.html">Beginner</a>
      <a href="#">Pre-intermediate</a>
      <a href="#">Intermediate</a>
    </div>
  </div>

Please refer to the images I am attaching as they will make it clear.

After scrolling a bit

While at top of page


回答1:

Remove position:unset; replace with position:relative; Separate the first two classes in the style sheet because it seems to be clashing

  • 发表于 2019-02-13 17:42
  • 阅读 ( 242 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除