使用纯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
}

Answer 2

If we are use chosen dropdown list, then we can use below css(No JS/JQuery require)

<select chosen="{width: '100%'}" ng- 
   model="modelName" class="form-control input- 
   sm"
   ng- 
   options="persons.persons as 
   persons.persons for persons in 
   jsonData"
   ng- 
   change="anyFunction(anyParam)" 
   required>
   <option value=""> </option>
</select>
<style>   
.chosen-container .chosen-drop {
    border-bottom: 0;
    border-top: 1px solid #aaa;
    top: auto;
    bottom: 40px;
}

.chosen-container.chosen-with-drop .chosen-single {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;

    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

    background-image: none;
}

.chosen-container.chosen-with-drop .chosen-drop {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    box-shadow: none;

    margin-bottom: -16px;
}
</style>