文章/答案/技术大牛

发布

社区首页 >问答首页 >如何创建下拉菜单并放置内容？

问如何创建下拉菜单并放置内容？
EN

Stack Overflow用户

提问于 2021-06-17 12:51:16

回答 2查看 44关注 0票数 0

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

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-06-17 14:10:10

将鼠标悬停在#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;

        }

票数 0

Stack Overflow用户

发布于 2021-06-17 13:15:44

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

  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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68013109

复制

相似问题

问如何创建下拉菜单并放置内容？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建下拉菜单并放置内容？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建下拉菜单并放置内容？
EN