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.

  1. add position: relative #nav ul li

  2. 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

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -