对齐顶部的父
现在所在的位置: http://goo.gl/SA2ajX对齐顶部的父
我有这样的尺寸改变头(使用CSS3
动画和jQuery
)和一帮在它li
标签。
当我将鼠标悬停在其中一个li
元素上时,我想要一个辅助标题放在原始标题下方(其中包含一些链接)。当我添加第二个div
时,如何在不考虑大小的情况下直接在主要的div
下对齐它?
编辑:如果您调整浏览器窗口的大小,标题会更改其大小。这就是为什么我遇到麻烦,我不能简单地改变CSS来适应它,因为它在另一个屏幕上会有所不同。
下面是一个简单的下拉菜单的代码。
.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>
希望这有助于!
我想知道你如何能够轻松地下拉菜单。但我宁愿有一个水平列表,填充页面的宽度,而不是一个小容器框 – 2015-04-01 00:04:23
刚刚更新了代码片段。基本上,我所做的是给所有外部'li's(例如'menu 1' ...)提供一个类名,然后给出了12.5%的宽度。使其扩大的诀窍是给它一个百分比%,而不是px。 – 2015-04-01 01:02:16
可能你可以像对待图像一样对其进行偏移。尽管只是使用另一个元素并水平缩放它,而不是具有图像? – cnorthfield 2015-03-31 20:50:02
我会这样做,但标题大小是响应页面的宽度,所以它不会工作。 – 2015-04-01 00:02:21