我已經(jīng)使用純CSS創(chuàng)建了一個(gè)下拉菜單，并且將其放到我喜歡的地方，但我希望它是“下拉”而不是“下拉”，因?yàn)椴藛螜谖挥诓藛蔚牡撞俊２季?。我需要添加或更改以使其“下拉”嗎?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>
2 回答
慕斯王
TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊
如果我們使用選擇的下拉列表，則可以在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>
添加回答
舉報(bào)
0/150
提交
取消