使用纯 css 打开/向上打开的下拉菜单
Posted
技术标签:
【中文标题】使用纯 css 打开/向上打开的下拉菜单【英文标题】：Drop-down menu that opens up/upward with pure css 【发布时间】：2011-12-10 11:32:36 【问题描述】：我用纯 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>
<li><a href="#">Civil Law</a></li>
<li><a href="#">Criminal Law ›</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 ›</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 ›</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 ›</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 ›</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 ›</a>
<ul>
<li><a href="#">Healthcare Providers</a></li>
<li><a href="#">Insurance Companies</a></li>
</ul>
</li></ul>
<li><center><a href="#">News & 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>【问题讨论】：
能否提供 html 标记或演示站点？ 感谢您提出这个问题！我自己也只有一个。需要的下拉菜单。并且在 youtube 上没有找到好的教程。 【参考方案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>
【讨论】：
【参考方案2】：将bottom:100% 添加到您的#menu:hover ul li:hover ul 规则中
Demo 1
#menu:hover ul li:hover ul
position: absolute;
margin-top: 1px;
font: 10px;
bottom: 100%; /* added this attribute */
或者更好的是为了防止子菜单产生同样的效果，只需添加这条规则
Demo 2
#menu>ul>li:hover>ul
bottom:100%;
Demo 3
来源：http://jsfiddle.net/W5FWW/4/
要取回边框，您可以添加以下属性
#menu>ul>li:hover>ul
bottom:100%;
border-bottom: 1px solid transparent
【讨论】：
哦，你太棒了，谢谢！但是我有一个额外的挑剔，当菜单向上翻转时，主菜单栏的顶部边框消失（即使您开始滚动子菜单），这不会发生然后菜单向下翻转，有什么想法吗？ @Jenna 添加了另一个演示和规则。这应该可以解决边界问题。 再次感谢，完美运行！我会给你的答案 ^1 但我没有足够的分数。 @user1574041 当然！只需将适当的过渡属性应用于您需要动画的任何内容（例如#menu a transition:background-color 0.2s;）。 see here
@user1574041 是的，这确实是可能的，但需要一些工作才能实现。这是一个示例：jsfiddle.net/W5FWW/583。我的动画使用 css bottom 属性。然而，它的一个主要问题是它将子菜单隐藏在主导航后面。以上是关于使用纯 css 打开/向上打开的下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章