将鼠标悬停在下拉菜单上会略微提高其内容并在页面右侧创建边距

The problem is with the photography website I have created for some reason just on the "Contact" and "Bio" pages. It is only when the screen is resized so you will need to shrink down till the layout changes. Then when you hover over the menu tab "Albums" and the drop down menu appears it is pulling the content under it up slightly. It also creates a margin on the right that creates a scroll bar at the bottom. I have been combing through the CSS over and over trying to tweak things, can't find a solution though. The website is:

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

"Bio" http://www.sairjanephotography.co.uk/bio.html

"Contact" http://www.sairjanephotography.co.uk/contact/contact.html

Also I just noticed the actual contact page drop down menu is hard to actually get onto with the mouse where as the Bio one isn't. Any help appreciated

另外我只是注意到实际的联系页面下拉菜单很难用鼠标实际进入,而Bio的实际情况并非如此。任何帮助赞赏

1 个解决方案

#1

You can ditch the javascript approach, and just use CSS. Something like this would work; just apply left: 100% to get it on the right instead of below.

你可以抛弃javascript方法,只使用CSS。像这样的东西会起作用;只需申请左:100%在右边而不是在下面。

Edit: sorry for not reading the problem earlier. Your problem is that you have defined width on your ul element. On line 277, you have:

编辑:抱歉没有提前阅读问题。您的问题是您已在ul元素上定义了宽度。在第277行,你有:

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

  }
}

But if you remove width: 18em, all is well, it appears.

但如果你删除宽度:18em,一切都很好,它出现了。

To clarify on this, you shouldn't be setting fixed widths if you want to acheive a good mobile design. Instead, try to use tricks like text-align: center (coupled with display: inline-block, and display: block; margin: 0 auto;.

为了澄清这一点,如果你想要实现一个好的移动设计,你不应该设置固定的宽度。相反,尝试使用text-align:center(加上display:inline-block,display:block; margin:0 auto;)等技巧。

I think the other part of this question had to do with the hiding of the title. If you still want your header to show, you could either change its z-index to anything higher than the dropdown, or you could use an ajacent selector to give the main content a margin-top when the dropdown is active.

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

For example:

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

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

#1