对齐顶部的父

Question

现在所在的位置： http://goo.gl/SA2ajX

我有这样的尺寸改变头（使用CSS3动画和jQuery）和一帮在它li标签。

当我将鼠标悬停在其中一个li元素上时，我想要一个辅助标题放在原始标题下方（其中包含一些链接）。当我添加第二个div时，如何在不考虑大小的情况下直接在主要的div下对齐它？

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

Answer 1

下面是一个简单的下拉菜单的代码。

.list 
 
{ 
 
    width:12.5%; 
 
} 
 

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

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

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

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

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

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

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

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

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

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

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

<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>

希望这有助于！