将div的顶部与其父级的底部对齐

Question

当前网站： http://goo.gl/SA2ajX

我有这个尺寸更改标题（使用CSS3动画和jQuery），其中包含一堆li标记。

当我将鼠标悬停在其中一个li元素上时，我希望辅助标题低于原始标题（包含一些链接）。当我添加第二个div时，如何直接在主div下方对齐它而不管大小如何？

编辑：如果您调整浏览器窗口的大小，标题会更改其大小。这就是为什么我遇到麻烦，我不能简单地改变CSS以使其适合，因为它在另一个屏幕上会有所不同。

Answer 1

以下是简单下拉菜单的代码。

＆＃13;

＆＃13;

.list
{
  width:12.5%;
 }

#primary_nav_wrap
{
	margin-top:15px;
  width:100%;
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	//float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap ul li:hover > ul
{
	display:block
}

＆＃13;

<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item list"><a href="#">Home</a></li>
  <li class="list"><a href="#">Menu 1</a>
    <ul >
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li class="list"><a href="#">Menu 2</a>
    <ul>
      <li><a href="#">Sub Menu 1</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
    </ul>
  </li>
  <li class="list"><a href="#">Menu 3</a>
    <ul>
      <li class="dir"><a href="#">Sub Menu 1</a></li>
      <li class="dir"><a href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
      </li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a></li>
      <li><a href="#">Sub Menu 5</a></li>
    </ul>
  </li>
  <li class="list"><a href="#">Menu 4</a></li>
  <li class="list"><a href="#">Menu 5</a></li>
  <li class="list"><a href="#">Menu 6</a></li>
  <li class="list"><a href="#">Contact Us</a></li>
</ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

希望这会有所帮助!!