使用纯 css 向上/向上打开的下拉菜单 [英] Drop-down menu that opens up/upward with pure css
本文介绍了使用纯 css 向上/向上打开的下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用纯 CSS 创建了一个下拉菜单，我把它放到了一个我喜欢的地方，除了我希望它是下拉"而不是下拉"，因为菜单栏在布局的底部.我需要添加或更改什么才能使其下拉"?
#menu * {填充:0;边距:0；字体:12px 格鲁吉亚；列表样式类型:无；}#菜单 {边距顶部:100px；向左飘浮;行高:10px；左:200px；}#菜单一个{显示:块；文字装饰:无；颜色:#3B5330；}#menu a:hover { 背景:#B0BD97;}#menu ul li ul li a:hover {背景:#ECF1E7；填充左:9px;左边框:实心 1px #000；}#menu ul li ul li {宽度:140px；边界:无；颜色:#B0BD97；填充顶部:3px；填充底部:3px;左边距:3px；padding-right: 3px;背景:#B0BD97；}#menu ul li ul li a {字体:11px arial；字体粗细:正常；字体变体:小型大写字母；填充顶部:3px;填充底部:3px;}#menu ul li {向左飘浮;宽度:146px；字体粗细:粗体；边框顶部:实心 1px #283923；边框底部:实心 1px #283923；背景:#979E71；}#menu ul li a {字体粗细:粗体；填充:15px 10px；}#菜单里{位置:相对；向左飘浮;}#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul {显示:无；列表样式类型:无；宽度:140px；}#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {显示:块；}#menu:hover ul li:hover ul li:hover ul {位置:绝对；左边距:145px；边距顶部:-22px；字体:10px；}#menu:hover ul li:hover ul {位置:绝对；边距顶部:1px；字体:10px；} 解决方案
将 bottom:100% 添加到您的 #menu:hover ul li:hover ul 规则>
演示 1
#menu:hover ul li:hover ul {位置:绝对；边距顶部:1px；字体:10px；底部:100%；/* 添加这个属性 */}或者更好地防止子菜单具有相同的效果，只需添加此规则
演示 2
#menu>ul>li:hover>ul {底部:100%；}演示 3
来源:http://jsfiddle.net/W5FWW/4/
为了取回边框，您可以添加以下属性
#menu>ul>li:hover>ul {底部:100%；边框底部:1px 实心透明}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 * {
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>
解决方案
Add bottom:100% to your #menu:hover ul li:hover ul rule
Demo 1
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
bottom: 100%; /* added this attribute */
}
Or better yet to prevent the submenus from having the same effect, just add this rule
Demo 2
#menu>ul>li:hover>ul {
bottom:100%;
}
Demo 3
source: http://jsfiddle.net/W5FWW/4/
And to get back the border you can add the following attribute
#menu>ul>li:hover>ul {
bottom:100%;
border-bottom: 1px solid transparent
}
这篇关于使用纯 css 向上/向上打开的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
