带有子div的CSS下拉菜单

Question

我正在尝试创建一个导航栏。每个链接都有详细的子菜单，如图像文本搜索表单等。我正在尝试做一些如图所示的事情。

我附上了我试过的一个片段！但这不是我的预期。

此处示例：

.menu {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  padding: 0;
  margin: 0;
  display: inline-block;
  list-style: none
}
ul.menu ul {
  position: absolute;
  list-style: none;
  display: none;
  width: 100%;
  padding-bottom: 5px;
  border-bottom: 3px solid #b0063a
}
ul.menu>li {
  float: left;
  position: relative;
  display: block;
  border-right: 1px #b0063a dotted;
  height: 25px;
  padding-left: 18px;
  padding-right: 18px
}
ul.menu ul li {
  width: 1000px;
  background-color: #f5f5f5;
  text-align: left;
  border-bottom: 1px solid #E5E5E5;
}
ul.menu li:hover>ul {
  width: 1000px;
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
}

<ul class="menu">
  <li>
    <a href="#" title="Home">Home</a>
  </li>
  <li>
    <a href="#" title="ınfo">Info</a>
    <ul>
      <li>HERE is some images and etc.</li>
    </ul>
  </li>
</ul>