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 * { _x000D_
padding:0; _x000D_
margin: 0; _x000D_
font: 12px georgia; _x000D_
list-style-type:none;_x000D_
}_x000D_
#menu { _x000D_
margin-top: 100px;_x000D_
float: left;_x000D_
line-height: 10px; _x000D_
left: 200px;_x000D_
}_x000D_
#menu a { _x000D_
display: block; _x000D_
text-decoration: none; _x000D_
color: #3B5330;_x000D_
}_x000D_
#menu a:hover { background: #B0BD97;}_x000D_
#menu ul li ul li a:hover { _x000D_
background: #ECF1E7; _x000D_
padding-left:9px;_x000D_
border-left: solid 1px #000;_x000D_
}_x000D_
#menu ul li ul li {_x000D_
width: 140px; _x000D_
border: none; _x000D_
color: #B0BD97; _x000D_
padding-top: 3px; _x000D_
padding-bottom:3px; _x000D_
padding-left: 3px; _x000D_
padding-right: 3px; _x000D_
background: #B0BD97;_x000D_
}_x000D_
#menu ul li ul li a { _x000D_
font: 11px arial; _x000D_
font-weight:normal; _x000D_
font-variant: small-caps; _x000D_
padding-top:3px; _x000D_
padding-bottom:3px;_x000D_
}_x000D_
#menu ul li {_x000D_
float: left; _x000D_
width: 146px; _x000D_
font-weight: bold; _x000D_
border-top: solid 1px #283923; _x000D_
border-bottom: solid 1px #283923; _x000D_
background: #979E71;_x000D_
}_x000D_
#menu ul li a { _x000D_
font-weight: bold;_x000D_
padding: 15px 10px;_x000D_
}_x000D_
#menu li {_x000D_
position:relative; _x000D_
float:left;_x000D_
}_x000D_
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul {_x000D_
display:none;_x000D_
list-style-type:none;_x000D_
width: 140px;_x000D_
}_x000D_
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {_x000D_
display:block;_x000D_
}_x000D_
#menu:hover ul li:hover ul li:hover ul {_x000D_
position: absolute;_x000D_
margin-left: 145px;_x000D_
margin-top: -22px;_x000D_
font: 10px;_x000D_
}_x000D_
#menu:hover ul li:hover ul {_x000D_
position: absolute;_x000D_
margin-top: 1px;_x000D_
font: 10px;_x000D_
}<div id="menu">_x000D_
<ul>_x000D_
<li><center><a href="X">Home</a></center>_x000D_
<ul>_x000D_
<li><a href="#">About Us</a></li>_x000D_
<li><a href="#">Disclaimer</a></li>_x000D_
</ul>_x000D_
</li> _x000D_
<li>_x000D_
<center><a href="#">Practice Areas</a></center>_x000D_
<ul>_x000D_
<li><a href="#">Civil Law</a></li>_x000D_
<li><a href="#">Criminal Law ›</a>_x000D_
<ul>_x000D_
<li><a href="#">Joomla</a></li>_x000D_
<li><a href="#">Drupal</a></li>_x000D_
<li><a href="#">Wordpress</a></li>_x000D_
</ul>_x000D_
<li><a href="#">Family Law ›</a>_x000D_
<ul>_x000D_
<li><a href="#">Joomla</a></li>_x000D_
<li><a href="#">Drupal</a></li>_x000D_
<li><a href="#">Wordpress</a></li>_x000D_
</ul>_x000D_
<li><a href="#">Personal Injury ›</a>_x000D_
<ul>_x000D_
<li><a href="#">Joomla</a></li>_x000D_
<li><a href="#">Drupal</a></li>_x000D_
<li><a href="#">Wordpress</a></li>_x000D_
</ul>_x000D_
<li><a href="#">Traffic Offenses ›</a>_x000D_
<ul>_x000D_
<li><a href="#">Joomla</a></li>_x000D_
<li><a href="#">Drupal</a></li>_x000D_
<li><a href="#">Wordpress</a></li>_x000D_
</ul>_x000D_
<li><a href="#">FAQ</a> </li>_x000D_
</ul>_x000D_
</li>_x000D_
_x000D_
<li><center><a href="#">Attorney</a></center>_x000D_
<ul>_x000D_
<li><a href="#">X</a></li>_x000D_
<li><a href="#">X</a></li>_x000D_
<li><a href="#">X</a></li>_x000D_
<li><a href="#">X</a></li>_x000D_
</ul>_x000D_
</li>_x000D_
_x000D_
<li><center><a href="#">Contact Us</a></center>_x000D_
<ul>_x000D_
<li><a href="#">Locations ›</a>_x000D_
<ul>_x000D_
<li><a href="#">Rockville Office</a></li>_x000D_
<li><a href="#">Frederick Office</a></li>_x000D_
<li><a href="#">Greenbelt Office</a></li>_x000D_
</ul>_x000D_
<li><a href="#">Phone Directory</a></li>_x000D_
<li><a href="#">Mailing Address</a></li>_x000D_
</ul>_x000D_
_x000D_
</li>_x000D_
_x000D_
<li><center><a href="#">Resources</a></center>_x000D_
<ul>_x000D_
<li><a href="#">Helpful Links</a></li>_x000D_
<li><a href="#">Affiliates ›</a>_x000D_
<ul>_x000D_
<li><a href="#">Healthcare Providers</a></li>_x000D_
<li><a href="#">Insurance Companies</a></li>_x000D_
</ul>_x000D_
</li></ul>_x000D_
<li><center><a href="#">News & Events</a></center>_x000D_
<ul>_x000D_
<li><a href="#">Press Articles</a></li>_x000D_
<li><a href="#">Newsletter</a></li>_x000D_
<li><a href="#">Events</a></li>_x000D_
<li><a href="#">Blog</a></li>_x000D_
</ul>_x000D_
<li><center><a href="#">Espanol</a></center>_x000D_
<ul>_x000D_
<li><a href="#">X</a></li>_x000D_
</ul>_x000D_
_x000D_
</ul>_x000D_
</div>This question is related to
html
css
drop-down-menu
menu
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>
Source: Stackoverflow.com