如何将下拉菜单更改为下拉菜单 [英] How to change drop-down menu to drop-up menu
本文介绍了如何将下拉菜单更改为下拉菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这个菜单栏: http://jsfiddle.net/PtQAP/
和我需要把它放在最下面,下拉菜单变成下拉菜单。
我该怎么做?
css:
ul,li,a {
margin:0;
padding:0;
}
li {
list-style:none;
}
a {
text-decoration:none;
颜色:#000000;
}
ul> li {
float:left;
}
ul> li a {
color:#fff;
font-weight:bold;
line-height:40px;
height:40px;
display:block;
padding:0px 10px;
}
ul li a:hover {
background:#666666;
}
ul li ul {
display:none;
位置:绝对;
背景:#333333;
}
ul li li li {
float:none;
line-height:40px;
height:40px;
}
感谢您的回答。
解决方案
为位置固定
设置栏,并设置它的底部
到 0px
,然后将菜单设置为底部$ c $在这种情况下
40px
div {
background:#999999;
height:40px;
font-family:Arial,Helvetica,sans-serif;
font-size:15px;
颜色:#000000;
margin:-8px;
宽度:100%;
位置:固定;
bottom:0px;
left:0px;
}
ul li ul {
display:none;
位置:绝对;
背景:#333333;
bottom:40px;
}
I have this menu bar: http://jsfiddle.net/PtQAP/ and I need to put it to the bottom and the drop-down menu change to drop-up menu. How would I do that?
css:
ul, li, a {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
ul > li {
float: left;
}
ul > li a {
color: #fff;
font-weight: bold;
line-height: 40px;
height:40px;
display:block;
padding:0px 10px;
}
ul li a:hover {
background: #666666;
}
ul li ul {
display: none;
position: absolute;
background: #333333;
}
ul li ul li {
float: none;
line-height: 40px;
height: 40px;
}
Thanks for the answers.
解决方案
give the bar a position
of fixed
, and set its bottom
to 0px
, then set your menu to have a bottom
of the height of your bar, in this case 40px
div {
background: #999999;
height: 40px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #000000;
margin: -8px;
width:100%;
position:fixed;
bottom:0px;
left:0px;
}
ul li ul {
display: none;
position: absolute;
background: #333333;
bottom:40px;
}
这篇关于如何将下拉菜单更改为下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文