使用纯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-&nbsp;&nbsp; &nbsp;model="modelName" class="form-control input-&nbsp;&nbsp; &nbsp;sm"&nbsp; &nbsp;ng-&nbsp;&nbsp; &nbsp;options="persons.persons as&nbsp;&nbsp; &nbsp;persons.persons for persons in&nbsp;&nbsp; &nbsp;jsonData"&nbsp; &nbsp;ng-&nbsp;&nbsp; &nbsp;change="anyFunction(anyParam)"&nbsp;&nbsp; &nbsp;required>&nbsp; &nbsp;<option value=""> </option></select><style>&nbsp; &nbsp;.chosen-container .chosen-drop {&nbsp; &nbsp; border-bottom: 0;&nbsp; &nbsp; border-top: 1px solid #aaa;&nbsp; &nbsp; top: auto;&nbsp; &nbsp; bottom: 40px;}.chosen-container.chosen-with-drop .chosen-single {&nbsp; &nbsp; border-top-left-radius: 0px;&nbsp; &nbsp; border-top-right-radius: 0px;&nbsp; &nbsp; border-bottom-left-radius: 5px;&nbsp; &nbsp; border-bottom-right-radius: 5px;&nbsp; &nbsp; background-image: none;}.chosen-container.chosen-with-drop .chosen-drop {&nbsp; &nbsp; border-bottom-left-radius: 0px;&nbsp; &nbsp; border-bottom-right-radius: 0px;&nbsp; &nbsp; border-top-left-radius: 5px;&nbsp; &nbsp; border-top-right-radius: 5px;&nbsp; &nbsp; box-shadow: none;&nbsp; &nbsp; margin-bottom: -16px;}</style>