将CSS下拉菜单的最后一个子菜单右对齐 [英] Right-align last submenu of a css drop-down menu
本文介绍了将CSS下拉菜单的最后一个子菜单右对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
希望此CSS下拉菜单的最后一个子菜单右对齐: https://jsfiddle.net/mishka00/p6cyy5p7/.它当前右对齐(不正确)只是为了显示所需的最终结果.尝试了 right:0
和 left:auto
的各种组合,但无法弄清楚.
Would like the last submenu of this css drop-down menu to be right-aligned: https://jsfiddle.net/mishka00/p6cyy5p7/. It is currently right-aligned (incorrectly) just to show the desired end result. Tried various combinations of right:0
and left:auto
, but couldn't figure it out.
推荐答案
-
为
#nav ul li
为 #nav ul li:last-child ul
#nav ul {
padding:0;
margin:0;
list-style:none;
}
#nav ul li {
float:left;
border:1px solid #fff;
margin:0 30px;
position: relative;
}
#nav ul li a {
display:block;
padding:10px 6px;
position:relative;
}
#nav ul li:hover {
border-left:1px solid #E9E9E9;
border-right:1px solid #E9E9E9;
border-top:1px solid #E9E9E9;
}
#nav ul li ul {
display:none;
}
#nav ul li:hover ul {
display:block;
position:absolute;
z-index: 10;
background:#fff;
width:150px;
border:0;
}
#nav ul li ul li {
display:block;
position:relative;
border:none;
float:none;
margin:0;
left:-1px;
}
#nav ul li ul li:hover {
border:none;
background:#F7F9FB;
}
#nav ul li ul li a {
padding:10px;
border:1px solid #E9E9E9;
}
#nav ul li:last-child ul {
right: 0;
background:white;
}
#nav ul li:last-child ul li{
left:1px;
}
<div id="nav">
<ul>
<li><a href="#">Menu1</a>
<ul>
<li><a href="menu.html">Item1</a>
</li>
<li><a href="menu.html">Item2</a>
</li>
<li><a href="menu.html">Item3</a>
</li>
<li><a href="menu.html">Item4</a>
</li>
</ul>
</li>
<li><a href="#">Menu2</a>
<ul>
<li><a href="menu.html">Item1</a>
</li>
<li><a href="menu.html">Item2</a>
</li>
<li><a href="menu.html">Item3</a>
</li>
<li><a href="menu.html">Item4</a>
</li>
</ul>
</li>
<li><a href="#">Menu3</a>
<ul>
<li><a href="menu.html">Item1</a>
</li>
<li><a href="menu.html">Item2</a>
</li>
<li><a href="menu.html">Item3</a>
</li>
<li><a href="menu.html">Item4</a>
</li>
</ul>
</li>
</ul>
</div>
<div style='clear: both;margin-bottom:5px;'></div>
<div style='border-top:1px solid navy;'></div>
这篇关于将CSS下拉菜单的最后一个子菜单右对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文