html - 将鼠标悬停在下拉菜单上会将其下方的内容稍微向上移动并在页面右侧创建边距

Question

问题出在我出于某种原因仅在“联系” 和“个人简介” 页面上创建的摄影网站。只有在调整屏幕大小时，您才需要缩小直到布局发生变化。然后，当您将鼠标悬停在菜单选项卡“相册”上并且出现下拉菜单时，它会将其下方的内容稍微向上拉。它还在右侧创建了一个边距，从而在底部创建了一个滚动条。我一直在一遍又一遍地梳理 CSS，试图调整一些东西，但找不到解决方案。网站是:

“生物”http://www.sairjanephotography.co.uk/bio.html

“联系方式” http://www.sairjanephotography.co.uk/contact/contact.html

我还注意到实际的联系页面下拉菜单很难用鼠标真正进入，而 Bio 则不能。任何帮助表示赞赏

Answer 1

您可以放弃 javascript 方法，而只使用 CSS。 Something like this会工作;只需应用 left: 100% 使其位于右侧而不是下方。

编辑:很抱歉没有早点阅读问题。您的问题是您在 ul 元素上定义了 width 。在第 277 行，您有:

/*Re-centres the nav menu on phones from tablet*/
 @media screen and (max-width:37em){
  .menu ul{
    font-size:4em;
    width:18em;

  }
}

但如果你删除 width: 18em，一切都很好，它出现了。

为了澄清这一点，如果您想获得良好的移动设计，则不应设置固定宽度。相反，请尝试使用 text-align: center 等技巧(结合 display: inline-block 和 display: block; margin: 0 auto;.

我认为这个问题的另一部分与标题的隐藏有关。如果您仍然希望显示标题，您可以将其 z-index 更改为高于下拉列表的任何内容，或者您可以使用相邻的选择器来提供主要内容margin-top 当下拉菜单处于事件状态时。

例如:

.menu.open + main {
    margin-top 3em;
}

/* Add some transitions for show possibly */
main {
    transition: 1s ease margin
}