Right-align last submenu of a css drop-down menu -
would last submenu of css drop-down menu right-aligned: https://jsfiddle.net/mishka00/p6cyy5p7/. right-aligned (incorrectly) show desired end result. tried various combinations of right:0
, left:auto
, couldn't figure out.
add
position: relative
#nav ul li
add
right: 0;
#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 { 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 { 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>
Comments
Post a Comment