Html 下拉菜单，如何使其向上增加
我正在编写这段代码，它是一种菜单，粘贴在屏幕底部。我想要在各种项目上悬停的下拉菜单。但我的问题是子菜单正在向下增加，而它们应该向上增加。。。。这是我的密码，请帮忙Html 下拉菜单，如何使其向上增加,html,css,Html,Css,我正在编写这段代码，它是一种菜单，粘贴在屏幕底部。我想要在各种项目上悬停的下拉菜单。但我的问题是子菜单正在向下增加，而它们应该向上增加。。。。这是我的密码，请帮忙 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html> <head> <title> Dropdown menu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
Dropdown menu
</title>
<style type="text/css">
body{
padding: 3em;
}
#menu ul {
font: 12px georgia;
list-style-type:none;
position:fixed;
left:0px;
bottom:0px;
height:50px;
width:100%;
}
#menu a {
display: block;
text-decoration: none;
color: #3B5330;
}
#menu a:hover {
background:#E3E4FA;
}
#menu ul li ul li {
color: #B0BD97;
padding-top: 3px;
padding-bottom:3px;
padding-left: 3px;
padding-right: 3px;
background:#E3E4FA;
}
#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;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background:#E3E4FA;
}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;
padding-bottom:13px;
}
#menu li{
position:relative;
float:left;
}
#menu ul li ul, #menu:hover ul li ul{
display:none;
list-style-type:none;
padding-bottom:0px;
}
#menu:hover ul, #menu:hover ul li:hover ul{
display:block;
}
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
}
#menu>ul>li:hover>ul {
bottom:100%;
border-bottom: 1px solid transparent
}
</style>
</head>
<body>
<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>
</li>
</ul>
</li>
<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>
<li>
<a href="#">
Joomla
</a>
</li>
<li>
<a href="#">
Drupal
</a>
</li>
<li>
<a href="#">
Wordpress
</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
下拉菜单
身体{
填充：3em；
}
#菜单ul{
字体：12px格鲁吉亚；
列表样式类型：无；
位置：固定；
左：0px；
底部：0px；
高度：50px；
宽度：100%；
}
#菜单a{
显示：块；
文字装饰：无；
颜色：#3B5330；
}
#菜单a：悬停{
背景：#E3E4FA；
}
#菜单ulli ulli{
颜色：#B0BD97；
垫面：3件；
垫底：3件；
左：3倍；
右侧填充：3px；
背景：#E3E4FA；
}
#菜单ul li ul li a{
字体：11px arial；
字体大小：正常；
字体变体：小大写字母；
垫面：3件；
垫底：3件；
}
#菜单ulli{
浮动：左；
字体大小：粗体；
边框顶部：实心1px#283923；
边框底部：实心1px#283923；
背景：#E3E4FA；
}
#菜单ulli a{
字体大小：粗体；
填充：15px 10px；
填充底部：13px；
}
#菜单里{
位置：相对位置；
浮动：左；
}
#菜单ul li ul，#菜单：悬停ul li ul{
显示：无；
列表样式类型：无；
垫底：0px；
}
#菜单：悬停ul，#菜单：悬停ul li：悬停ul{
显示：块；
}
#菜单：悬停ul li：悬停ul{
位置：绝对位置；
页边顶部：1px；
字体：10px；
}
#菜单>保险单>保险单：悬停>保险单{
底部：100%；
底部边框：1px实心透明
}
-
-
-
-
-
-
-
-
-
-
-
-
-
#导航{
宽度：980px；
高度：38px；
边缘顶部：100px；
}
#导航李{
浮动：左；
位置：相对位置；
宽度：100px；
边框：1px纯红；
}#导航li:hover{背景：银色；}
#导航李a{
文本转换：大写；
颜色：白色；
填充：13px 33px；
线高：38px；
字体大小：11px；
}
#导航LIA:悬停{文本装饰：无；}
#导航LIUL{
位置：绝对位置；
显示：无；
z指数：1000；
最小宽度：100%；
左：-1px；
}
#导航li：悬停ul{
底部：20px；
显示：块；
背景：#eee；
}
#导航李宇莉{
背景：无；
宽度：100%；
}
#导航li ul li:悬停{
背景：无；
背景色：#2a51b5；
}
#导航li ul li a{
文本转换：大写；
颜色：白色；
填充：8px 10px；
线高：28px；
宽度：100%；
}
- 一,
- 二,
- 2.1
- 2.2
- 2.3
- 三,
- 4
#navigation {
width: 980px;
height: 38px;
margin-top:100px;
}
#navigation li {
float: left;
position: relative;
width:100px;
border:1px solid red;
} #navigation li:hover { background: silver; }
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover { text-decoration: none; }
#navigation li ul {
position: absolute;
display:none;
z-index: 1000;
min-width: 100%;
left:-1px;
}
#navigation li:hover ul {
bottom:20px;
display:block;
background:#eee;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding: 8px 10px;
line-height: 28px;
width: 100%;
}
<ul id="navigation">
<li>1</li>
<li>2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>