使用纯CSS向上/向上打开的下拉菜单

Question

我已经使用纯CSS创建了一个下拉菜单，并且将其放到我喜欢的地方，但我希望它是“下拉”而不是“下拉”，因为菜单栏位于菜单的底部。布局。我需要添加或更改以使其“下拉”吗？#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> 

Answer 1

如果我们使用选择的下拉列表，则可以在css下面使用（不需要JS / JQuery）

<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>