Drop-down menu that opens up/upward with pure css

Question

I've created a dropdown menu with pure CSS and I've gotten it to a place that I like except I want it to be "drop-up" not "drop-down" since the menu bar is going at the bottom of the layout. What I need to add or change to make it "drop-up"?

#menu * {     padding:0;     margin: 0;     font: 12px georgia;     list-style-type:none;  }  #menu {     margin-top: 100px;    float: left;    line-height: 10px;     left: 200px;  }  #menu a {     display: block;     text-decoration: none;     color: #3B5330;  }  #menu a:hover { background: #B0BD97;}  #menu ul li ul li a:hover {     background: #ECF1E7;     padding-left:9px;    border-left: solid 1px #000;  }  #menu ul li ul li {    width: 140px;     border: none;     color: #B0BD97;      padding-top: 3px;     padding-bottom:3px;     padding-left: 3px;     padding-right: 3px;     background: #B0BD97;  }  #menu ul li ul li a {     font: 11px arial;     font-weight:normal;     font-variant: small-caps;     padding-top:3px;     padding-bottom:3px;  }  #menu ul li {    float: left;     width: 146px;     font-weight: bold;     border-top: solid 1px #283923;     border-bottom: solid 1px #283923;     background: #979E71;  }  #menu ul li a {     font-weight: bold;    padding: 15px 10px;  }  #menu li {    position:relative;     float:left;  }  #menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul {    display:none;    list-style-type:none;    width: 140px;  }  #menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {    display:block;  }  #menu:hover ul li:hover ul li:hover ul {    position: absolute;    margin-left: 145px;    margin-top: -22px;    font: 10px;  }  #menu:hover ul li:hover ul {    position: absolute;    margin-top: 1px;    font: 10px;  }

<div id="menu">    <ul>      <li><center><a href="X">Home</a></center>        <ul>          <li><a href="#">About Us</a></li>          <li><a href="#">Disclaimer</a></li>        </ul>      </li>	      <li>        <center><a href="#">Practice Areas</a></center>        <ul>          <li><a href="#">Civil Law</a></li>          <li><a href="#">Criminal Law &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &rsaquo;</a>            <ul>              <li><a href="#">Joomla</a></li>              <li><a href="#">Drupal</a></li>              <li><a href="#">Wordpress</a></li>            </ul>          <li><a href="#">Family Law &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &rsaquo;</a>            <ul>              <li><a href="#">Joomla</a></li>              <li><a href="#">Drupal</a></li>              <li><a href="#">Wordpress</a></li>            </ul>          <li><a href="#">Personal Injury &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&rsaquo;</a>            <ul>              <li><a href="#">Joomla</a></li>              <li><a href="#">Drupal</a></li>              <li><a href="#">Wordpress</a></li>            </ul>          <li><a href="#">Traffic Offenses &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&rsaquo;</a>            <ul>              <li><a href="#">Joomla</a></li>              <li><a href="#">Drupal</a></li>              <li><a href="#">Wordpress</a></li>            </ul>          <li><a href="#">FAQ</a>	</li>        </ul>      </li>        <li><center><a href="#">Attorney</a></center>        <ul>          <li><a href="#">X</a></li>          <li><a href="#">X</a></li>          <li><a href="#">X</a></li>          <li><a href="#">X</a></li>        </ul>      </li>        <li><center><a href="#">Contact Us</a></center>        <ul>          <li><a href="#">Locations &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&rsaquo;</a>            <ul>              <li><a href="#">Rockville Office</a></li>              <li><a href="#">Frederick Office</a></li>              <li><a href="#">Greenbelt Office</a></li>            </ul>          <li><a href="#">Phone Directory</a></li>          <li><a href="#">Mailing Address</a></li>        </ul>        </li>        <li><center><a href="#">Resources</a></center>        <ul>          <li><a href="#">Helpful Links</a></li>          <li><a href="#">Affiliates &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&rsaquo;</a>            <ul>              <li><a href="#">Healthcare Providers</a></li>              <li><a href="#">Insurance Companies</a></li>            </ul>          </li></ul>      <li><center><a href="#">News &amp; Events</a></center>        <ul>          <li><a href="#">Press Articles</a></li>          <li><a href="#">Newsletter</a></li>          <li><a href="#">Events</a></li>          <li><a href="#">Blog</a></li>        </ul>      <li><center><a href="#">Espanol</a></center>        <ul>          <li><a href="#">X</a></li>        </ul>      </ul>  </div>

Answer 1

Add bottom:100% to your #menu:hover ul li:hover ul rule

Demo 1

#menu:hover ul li:hover ul {     position: absolute;     margin-top: 1px;     font: 10px;     bottom: 100%; /* added this attribute */ } 

---

Or better yet to prevent the submenus from having the same effect, just add this rule

Demo 2

#menu>ul>li:hover>ul {      bottom:100%; } 

---

Demo 3

source: http://jsfiddle.net/W5FWW/4/

And to get back the border you can add the following attribute

#menu>ul>li:hover>ul {      bottom:100%;     border-bottom: 1px solid transparent }