作为使我的菜单响应的第一步,我想在css中添加媒体查询以更改菜单显示的方式,以便每个列表项垂直显示在上一项的下方,并具有它自己的子菜单显示下一个列表项之前显示在其下方的项目。希望有道理。以下是使菜单在网站桌面版本中运行的HTML和CSS:
HTML
<nav>
<img id="logo" src="@logoUrl">
<ul>
<li class="@(CurrentPage.Url == "/" ? "current" : null)"><a href="/">Home</a></li>
@foreach (var item in menuItems)
{
<li class="@(CurrentPage.Id == item.Id ? "current" : null)">
<a href="@item.Url">@item.Name</a>
@if (item.Children.Where("Visible").Any())
{
var subMenuItems = item.Children.Where("Visible");
<ul>
@foreach (var sub in subMenuItems)
{
<li><a href="@sub.Url">@sub.Name</a></li>
}
</ul>
}
</li>
}
</ul>
<br class="clear">
</nav>
(这是在Umbraco,所以原谅所有Razor位)
CSS
#logo {
float: left;
margin-right: 25px;
}
nav {
width: 100%;
height: auto;
background-color: #354a49;
}
nav > ul > li {
display: block;
position: relative;
width: auto;
height: 50px;
float: left;
font-size: 1.1em;
margin: 0px 20px 0px 20px;
padding: 15px 8px 13px 8px;
text-align: center;
}
nav ul li a {
color: #fefce9;
margin-left: auto;
margin-right: auto;
}
nav ul li a:hover {
font-style: italic;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 99;
width: 200px;
}
nav ul li:hover {
border-bottom: 2px solid #fefce9;
background-color: #a1b0af;
}
nav ul li:hover > ul {
display: block;
margin-top: 2px;
}
nav ul li ul li {
display: block;
float: none;
padding: 20px 3px;
background-color: #a1b0af;
border-bottom: 2px solid #fefce9;
}
nav ul li ul li a {
color: #fefce9;
}
nav li.current {
background-color: #a1b0af;
border-bottom: 2px solid #fefce9;
}
nav li.current > a {
color: #fefce9;
font-style: italic;
}
这是我目前媒体查询中的CSS:
#logo {
margin-right: -50px;
}
nav > ul > li {
float: none;
margin: 0px;
}
nav ul ul {
width: 100%;
}
nav li.current {
background-color: inherit;
}
显示主菜单项一个接一个OK,但是当我尝试更改东西以便子菜单项出现在菜单项之间时,我最终会出现在菜单项顶部出现的子菜单项其他
修改
这里是按要求呈现的HTML:
</nav>
<img id="logo" src="/media/1042/wshalogo.png">
<ul>
<li class="current"><a href="/">Home</a></li>
<li>
<a href="/about-us/">About us</a>
<ul>
<li><a href="/about-us/our-people/">Our People</a></li>
<li><a href="/about-us/who-we-were-and-are/">Who we were and are</a></li>
<li><a href="/about-us/our-houses/">Our Houses</a></li>
<li><a href="/about-us/annual-reports/">Annual Reports</a></li>
</ul>
</li>
<li>
<a href="/being-a-tenant/">Being a Tenant</a>
<ul>
<li><a href="/being-a-tenant/asbestos/">Asbestos</a></li>
<li><a href="/being-a-tenant/being-safe-secure/">Being Safe & Secure</a></li>
</ul>
</li>
<li>
<a href="/news/">News</a>
<ul>
<li><a href="/news/community-garden/">Community Garden</a></li>
<li><a href="/news/football-team/">Football Team</a></li>
<li><a href="/news/health-centre/">Health Centre</a></li>
</ul>
</li>
</ul>
<br class="clear">
</nav>
答案 0 :(得分:0)
您的第二级ul
为position: absolute;
,这意味着它已从正常的文档流中取出,并且不会占用与其他任何元素相关的空间。尝试将absolute
更改为relative
。这应该使项目在菜单中正确定位。
nav ul ul {
display: none;
position: absolute; /* <--- Try changing this to relative. */
top: 100%;
left: 0;
z-index: 99;
width: 200px;
}
此外,顶级li
的固定高度不会让元素超过50px
。请尝试将其设置为min-height
:
nav > ul > li {
display: block;
position: relative;
width: auto;
height: 50px; /* <-- min-height: 50px */
float: left;
font-size: 1.1em;
margin: 0px 20px 0px 20px;
padding: 15px 8px 13px 8px;
text-align: center;
}
这有效in this fiddle但是当子菜单悬停然后没有徘徊时,导致尴尬的跳跃。
另外,请考虑您的使用案例 - 如果您这样做是为了支持平板电脑/移动设备,那么:hover
州的工作方式就不会像您在#&#t}时那样#&#t} 39;重新使用鼠标。用户必须知道按下&#34;关于我们&#34;链接文字以查看下拉列表,否则他们将被直接带到&#34;关于我们&#34;页面没有看到:hover
状态。可能需要显示树结构中的所有项目,或使用JavaScript为子菜单添加其他功能。
Here's a decent solution到没有JavaScript的响应式子菜单,但它也没有使用包含子项的顶级菜单项的链接。