title: Align menu items to the bottom of the div and not the top
body: <p>I'm developing a menu for a website. When we are on a selected page (let's say Home), I had a different class to the selected item menu (Home) to be able to style it differently. 
  I need to increase the height of the current selected page, however, when I'm doing it, all the menu items align to the top of the div. I would like to align them to the bottom of the div.</p>
  
  <p>To understand it, <a href="http://jsfiddle.net/7VqzM/5/" rel="nofollow">Here is a link to an EXAMPLE</a>  </p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>    .main-navigation {
  position: absolute;
  bottom: 0;
  z-index: 11;
  left: 16px;
  background-color: #ff0;
  }
  
  article, aside, footer, header, hgroup, main, nav, section {
  display: block;
  }
  
  #page_wrapper, #footer {
  text-align: left;
  }
  
  body {
  text-align: center;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  }
  
  .main-navigation ul {
  list-style: none;
  margin: 0 0 0 10px;
  padding: 0;
  }
  
  ul, menu, dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
  }
  
  .main-navigation li.current-menu-item {
  background-color: #DDDBD8;
  height: 41px;
  }
  
  .main-navigation li {
  margin-top: 14px;
  width: 110px;
  background: white;
  margin: 0 0px 0 3px;
  float: left;
  height: 27px;
  text-transform: uppercase;
  text-align: center;
  font-size: 13px;
  padding: 12px 5px 0 5px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: #eeeeee;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
  background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
  background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
  background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
  background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
  }
  
  .main-navigation ul {
  list-style: none;
  }
  
  .main-navigation li.current-menu-item a {
  text-decoration: none;
  font-size: 12px;
  font-family: 'FuturaRegular';
  color: #af8283;
  }
  
  .main-navigation li a {
  text-decoration: none;
  font-size: 12px;
  font-family: 'FuturaRegular';
  color: #5A4A42;
  }
  
  .site-header {
  height: 200px;
  position: relative;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;header id="header" class="site-header" role="banner"&gt;  
  &lt;nav id="site-navigation" class="main-navigation" role="navigation"&gt;
                  &lt;div class="menu-header-navigation-container"&gt;&lt;ul id="menu-header-navigation" class="header-nav"&gt;&lt;li id="menu-item-4" class="home menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-4"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5"&gt;&lt;a href="/news"&gt;News&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"&gt;&lt;a href="/shop"&gt;Shop&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"&gt;&lt;a href="/about-the-show"&gt;About The Show&lt;/a&gt;&lt;/li&gt;
  &lt;li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"&gt;&lt;a href="/contact-us"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt;     &lt;/nav&gt;&lt;/header&gt;
  </code></pre>