时间戳

首页 > 解决方案 > 如何创建下拉菜单并使内容下降？

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

问题描述

我在使用 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>

标签： javahtmlcssdrop-down-menu

解决方案

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

  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>

推荐阅读