时间戳

首页 > 解决方案 > 如何修复标题滚动和下拉列表消失？

html - 如何修复标题滚动和下拉列表消失？

问题描述

我网站上的标题运行良好，但由于某种原因，滚动到功能将部分放在我的标题后面而不是在它下面。此外，如果在页面顶部，子菜单无法正常工作并消失。如果您位于页面上的其他任何位置，则不会发生这种情况。

提前感谢您的帮助。我不确定我哪里出错了？

作为参考，我的网站可以在这里找到：http: //www.virtualphysio.net。我正在尝试在此https://www.paulgoughphysio.com/之后对风格进行建模。

你会认为像导航菜单这样简单的东西不会那么复杂，但这一直是我背后的一根刺！

/* do not change */
    .container{
    overflow: unset; 
    }
    #container ul{
    margin:0px;
    padding:0px;
    list-style-type:none;
    display:inline-block;
    }
    #container ul li ul li{
    display:none;
    }
    /* can change */
    #container{
    text-align:center;
    }
    #container ul li{
    width:130px;
    height:30px;
    line-height:30px;
    float:left;
    text-align:center;
    margin:5px;
    border-radius:0px;
    }
    #container ul li a{
    color:black;
    text-decoration:none;
    font-weight:bold;
    display: block;
    }
    #container ul li a:hover{
    text-decoration:none;
      border-radius:0px;
      color:#1dcdfe;
    }
    #container ul li:hover ul li{
    background-color:white;
    display:block;
    margin-left:0px;
    }
    #container > ul > li {
        border-right: 1px solid black;
    }
    #container > ul > li:last-child {
        border-right: 0;
    }
<div id="container">
  <ul>
    <li><a href='#scroll-home'>Home</a></li>
    <li><a href='#'>About Us</a>
     <ul>
      <li><a href='#scroll-whyhere'>Why You're Here</a></li>
      <li><a href='#scroll-ourmethod'>Our Method</a></li>
      <li><a href='#scroll-whyus'>Why Choose US</a></li>
          <li><a href='#scroll-testimonials'>Testimonials</a></li>
     </ul>
    </li>
    <li><a href='#'>Our Services</a>
     <ul>
      <li><a href='#scroll-wetreat'>What We Treat</a></li>
      <li><a href='#scroll-packages'>Packages & Pricing</a></li>
     </ul>
    </li>
    <li><a href='#scroll-faq'>FAQs</a></li>
    <li><a href='#'>Contact Us</a></li>
  </ul>
</div>

标签： htmlcssdrop-down-menuheader

解决方案

当您在网站上添加更多内容时，该滚动将很有用。

但是，如果您真的不想拥有这些滚动条，您可以对 x 轴和 y 轴执行overflow-x: hiddenand overflow-y: hiddenor overflow: hidden。那不会让子元素扩展父元素。

body {
  overflow-x: hidden;
  overflow-y: hidden;
}

推荐阅读