html二级菜单向上打开,使用纯CSS向上/向上打开的下拉菜单

我使用纯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;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值