这是一个非常简单的基于 CSS 的下拉菜单示例:http://jsfiddle.net/V8aL6/
<ul id="nav">
<li>
<a href="#" title="Return home">Home</a>
</li>
<li>
<a href="#" title="About the company">About</a>
<ul>
<li><a href="#">The product</a></li>
<li><a href="#">Meet the team</a></li>
</ul>
</li>
<li>
<a href="#" title="The services we offer">Services</a>
<ul>
<li><a href="#">Sevice one</a></li>
<li><a href="#">Sevice two</a></li>
<li><a href="#">Sevice three</a></li>
<li><a href="#">Sevice four</a></li>
</ul>
</li>
<li>
<a href="#" title="Our product range">Product</a>
<ul>
<li><a href="#">Small product (one)</a></li>
<li><a href="#">Small product (two)</a></li>
<li><a href="#">Small product (three)</a></li>
<li><a href="#">Small product (four)</a></li>
<li><a href="#">Big product (five)</a></li>
<li><a href="#">Big product (six)</a></li>
<li><a href="#">Big product (seven)</a></li>
<li><a href="#">Big product (eight)</a></li>
<li><a href="#">Enourmous product (nine)</a></li>
<li><a href="#">Enourmous product (ten)</a></li>
<li><a href="#">Enourmous product (eleven)</a></li>
</ul>
</li>
<li>
<a href="#" title="Get in touch with us">Contact</a>
<ul>
<li><a href="#">Out-of-hours</a></li>
<li><a href="#">Directions</a></li>
</ul>
</li>
</ul>
但我找不到将子菜单与其父菜单的右边缘对齐的解决方案,如下所示:
最佳答案
该菜单通过修改left
属性实现隐藏/显示。您只需要调整 CSS 规则即可控制子菜单的显示机制:
#nav li:hover ul{
left:0;
}
我们不想让它向左对齐,而是向右对齐,所以我们添加了 right:0;
。但是,如果我们不触及左侧声明,菜单将被截断,因此我们编写 left:auto;
而不是 left:0;
让菜单展开到它的固有宽度。为了适应父 li
的边距,我们添加与负边距相同的数量,我们完成了:
#nav li:hover ul{
left:auto;
right:0;
margin-right:-10px;
}
关于html - 子菜单对齐到其父级右边缘的 CSS 下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22519377/