html - 使用过渡打开一个简单的下拉菜单我有基础但不能适应我的设计

Question

我需要在我正在处理的页面上保留一些不动产，所以我只想将鼠标悬停在主题上，然后让子主题可以从“下拉菜单”(实际上是一个 div缓出) div.

这是我想要的效果的 fiddle :

https://jsfiddle.net/170z6pj1/

但是我似乎无法理解如何让它与此一起工作，因此我希望文本“如何...”成为导致缓出的触发器:

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

我已经尝试了各种方法来尝试将 id="menu"放到“How to...”或“titleB”div 中，但如果我那样做，它们永远不会起作用。我意识到我的基本 CSS 不正确，无法正常工作，但我无法全神贯注于我需要更改的内容 - 第一次尝试过渡。

感谢所有回复。

附注据我所知，我必须使用“最大高度解决方法”来让它动态调整到列表项的正确长度。

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);
}

经过一番尝试，我通过删除“非必需品”，离我想要的设计又近了一步。不过，仍在寻找一种解决方案来保留我的原始设计(第二 fiddle )!

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

Answer 1

是的，这是因为您将填充和边框应用于:ul id="list"