如何创建下拉菜单并使内容下降？答案

【问题标题】：How do I create a drop down menu and make contents drop?如何创建下拉菜单并使内容下降？
【发布时间】：2021-06-17 04:51:15
【问题描述】：

我在使用 a 标签创建下拉菜单时遇到问题。我不知道为什么，但下拉菜单根本不起作用/似乎没有注册。当下拉菜单显示时，我希望它也将下面的内容下拉。有什么帮助吗？

    <body>

        <div ID = "contents">
        <a ID = "menuPage" href = "origami main.html#about">About</a>

    <div ID = "dropDown">
        <a ID = "dropDownPortfolio">Portfolio</a>
        <div ID = "dropDownCnt">
            <a ID = "portfolioPortrait" href = "origami main.html#portraits">Portraits</a>
            <a ID = "portfolioPortrait" href = "origami main.html#stationary">Stationary Cards</a>
        </div>
    </div>

        <a ID = "menuPage" href = "">Video</a>

        <a ID = "menuPage" href = "">Contact</a>
        </div>

    </body>



  <style>
        
        a, #dropDown {
        color: #ff80d5;
        font-family: Gill Sans, sans-serif;
        text-decoration: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 25px;
        }

        #contents{
        position: absolute;
        top: 50%;
        left: 50%;
        height: 30%;
        width: 50%;
        margin: -15% 0 0 -25%;
        }

        #dropDownCnt{
            display: none;
            position:absolute;

        }

    </style>

【问题讨论】：

请添加您的代码

标签： java html css drop-down-menu

【解决方案1】：

您需要在样式中添加悬停状态

  a#dropDownPortfolio:hover +  #dropDownCnt{
      display:block;
   }

 <style>
        
        a, #dropDown {
        color: #ff80d5;
        font-family: Gill Sans, sans-serif;
        text-decoration: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 25px;
        }

        #contents{
        position: absolute;
        top: 50%;
        left: 50%;
        height: 30%;
        width: 50%;
        margin: -15% 0 0 -25%;
        }

        #dropDownCnt{
            display: none;
            

        }
        
        a#dropDownPortfolio:hover +  #dropDownCnt{
          display:block;
        }

    </style>

<body>

        <div ID = "contents">
        <a ID = "menuPage" href = "origami main.html#about">About</a>

    <div ID = "dropDown">
        <a ID = "dropDownPortfolio">Portfolio</a>
        <div ID = "dropDownCnt">
            <a ID = "portfolioPortrait" href = "origami main.html#portraits">Portraits</a>
            <a ID = "portfolioPortrait" href = "origami main.html#stationary">Stationary Cards</a>
        </div>
    </div>

        <a ID = "menuPage" href = "">Video</a>

        <a ID = "menuPage" href = "">Contact</a>
        </div>

    </body>



  <style>
        
        a, #dropDown {
        color: #ff80d5;
        font-family: Gill Sans, sans-serif;
        text-decoration: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 25px;
        }

        #contents{
        position: absolute;
        top: 50%;
        left: 50%;
        height: 30%;
        width: 50%;
        margin: -15% 0 0 -25%;
        }

        #dropDownCnt{
            display: none;
            position:absolute;

        }

    </style><body>

        <div ID = "contents">
        <a ID = "menuPage" href = "origami main.html#about">About</a>

    <div ID = "dropDown">
        <a ID = "dropDownPortfolio">Portfolio</a>
        <div ID = "dropDownCnt">
            <a ID = "portfolioPortrait" href = "origami main.html#portraits">Portraits</a>
            <a ID = "portfolioPortrait" href = "origami main.html#stationary">Stationary Cards</a>
        </div>
    </div>

        <a ID = "menuPage" href = "">Video</a>

        <a ID = "menuPage" href = "">Contact</a>
        </div>

    </body>

【讨论】：

【解决方案2】：

悬停在#dropDown 上然后消耗#dropDownCnt

在最后添加

#dropDownCnt {
    max-height: 0px;
    overflow: hidden;
    visibility: hidden;
    transition: all 200ms ease;
  }
  #dropDown:hover #dropDownCnt{
    max-height: 100px;
    visibility: visible;
    overflow: auto;
  }

并删除它

#dropDownCnt{
            display: none;
            position:absolute;

        }

【讨论】：

非常感谢！这行得通，并且完全符合我的期望。您能告诉我 max-height 和 transition 属性的作用吗？
我们用于动画的过渡属性可以分为三个部分。第一个“全部”表示我们想要动画的所有属性。我们可以定义许多属性，如宽度、高度、不透明度最大高度来为这些属性设置动画。第二个是动画的功能，如缓动、线性、缓入、缓出、缓入和三次贝塞尔曲线。最后一个是这个动画将持续多长时间。对不起，我的英语不好。 read more
我们使用 max-height、max-width、min-height、min-width 来定义任何元素的最小和最大宽度和高度。如果我们使用正常的高度和宽度属性来为元素的宽度和高度属性设置动画，则它不起作用，而是我们使用最大高度、最大宽度属性来为元素宽度和高度属性设置动画。阅读更多max-width 和 max-height。
再次感谢您！很有帮助