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

Question

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

    <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>

Answer 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>

Answer 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;

        }

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

How do I create a drop down menu and make contents drop?

html

css

java

drop-down-menu