Drop Down Menu Swapping Left align to Right

this is useful if you have a nav that hits the right side of the screen and you want it to open on the left rather than the right side. you can see on the very right drop down item opens with its items aligned to the left rather than the right.
you can see it working here in this demo, or scroll down to see the live demo

Drop Down Menu Swapping Left align to Right Demo

View Demo Full Screen View Demo New Tab

Drop Down Menu Swapping Left align to Right Code

HTML

<div class='zHdEZ'>
<ul class='test-nav'><li>Home</li>
  <li>About</li>
  <li>
    Portfolio
    <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul>
  </li>
  <li>Blog</li>
  <li>Contact
  <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul></li>
</ul>
</div>

CSS

.zHdEZ {
margin: 0 auto 80px auto; /* demo margin */
}
ul.test-nav {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
margin-bottom:10px;
}
ul.test-nav li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul.test-nav li:hover {
  background: #555;
  color: #fff;
}
ul.test-nav li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul.test-nav > li:last-child ul{
    right: 4px;
    left: auto;
}
ul.test-nav li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul.test-nav li ul li:hover { background: #666; }
ul.test-nav li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}