Question

我需要在我正在处理的页面上保存一些不动产，所以我想简单地将鼠标悬停在主题上，然后可以从“下拉列表”访问子主题（实际上是一个div缓解）div。

这是我想要的效果的小提琴：

然而，我似乎无法理解如何让它与它一起工作，我希望文本“如何...”成为导致缓解的触发器：

我尝试了各种方法来尝试将id =“menu”放到“How to ...”或“titleB”div上，但是如果我这样做的话它们就不会工作。我意识到我的基础CSS不适合工作，但我无法绕过我需要改变的东西 - 第一次尝试过渡。

感谢所有回复。

P.S。据我所知，我必须使用“max-height workaround”来动态调整列表项的正确长度。

HTML: 

<div id="titleA">
  <div id="titleB"></div>How to...</div>
<div id="menu">
  <a>Hover to expand</a>
  <ul id="list">
    <li>How to book a meeting room</li>
    <li>How to book catering</li>
    <li>How to report extra cleaning requirement</li>
    <li>How to report a fault</li>
    <li>How to report a H&amp;S issue</li>
    <li>How to book a hot desk</li>
    <li>What happens if I get locked in</li>
    <li>How to request consumables - for kitchens, photocopiers, etc.</li>
    <li>Out of hours issues affecting buildings / How to make contact in an emergency</li>
    <li>Recycling guide</li>
    <li>Complaints and feedback</li>
  </ul>
</div>

CSS: 

#menu #list {
  max-height: 0;
  transition: max-height 1.5s ease-out;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  width: 99%;
  border: 1px solid #c8ced0;
  padding: 5px;
  font-size: 14px;
  display: inline-block;
}

#menu:hover #list {
  max-height: 500px;
  transition: max-height 1.5s ease-in;
}

#titleA {
  position: relative;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #5bc0de;
  padding-top: 14px;
  padding-left: 22px;
  height: 54px;
  width: calc(100% - 35px);
  margin-bottom: 5px;
  margin-top: 19px;
  font-size: 25px;
  color: white;
  font-family: 'Open Sans';
  font-weight: bold;


}

#titleB {
  position: absolute;
  top: 0px;
  right: -20px;
  height: 100%;
  width: 50px;
  background: #5bc0de;
  transform: skew(30deg);
}

经过一番游戏，我通过剪掉“非必需品”，更接近我想要的设计。仍然在寻找一种解决方案来保持我的原创设计（第二小提琴）！

https://jsfiddle.net/170z6pj1/4/

Answer 1

是的，因为您将填充和边框应用于：ul id =＆＃34; list＆＃34;

使用转换打开一个简单的下拉列表我有基础知识，但不适合我的设计

1 个答案: