HTML里怎么把ul的下拉菜单的背景色宽度铺满,还有怎么把背景色设为半透 ...
发布网友
发布时间：2022-04-28 12:57
共1个回答
热心网友
时间：2022-04-21 16:56
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LOL</title>
<style>
html, body{margin: 0; padding: 0; color: #fff; background-color: red; width: 100%; height: 100%;}
ul, li{list-style: none; margin: 0; padding: 0; color: #fff;}
.clear:after{content: ''; display: block; clear: both;}
.body:hover .bottom{display: block;}
.top, .list{width: 100%;}
.top{background-color: #000;}
.bottom{position: relative; z-index: 10; display: none;}
.top li, .list>li{width: 12.5%; float: left; line-height: 50px; text-align: center;}
.list>li li{line-height: 30px;}
.bg{width: 100%; height: 100%; position: absolute; background-color: #000; opacity: .5; left: 0; top: 0; z-index: -1;}
</style>
</head>
<body>
<div class="body">
<ul class="top clear">
<li>英雄联盟</li>
<li>官网首页</li>
<li>游戏资料</li>
<li>商城／合作</li>
<li>用户互动</li>
<li>赛事中心</li>
<li>自主系统</li>
<li>个人中心</li>
</ul>
<div class="bottom">
<ul class="list clear">
<li>logo.pic</li>
<li>
<ul>
<li>新手资料</li>
<li>资料库</li>
<li>攻略中心</li>
</ul>
</li>
<li>
<ul>
<li>新手资料</li>
<li>资料库</li>
<li>攻略中心</li>
</ul>
</li>
<li>
<ul>
<li>新手资料</li>
<li>资料库</li>
<li>攻略中心</li>
</ul>
</li>
<li>
<ul>
<li>新手资料</li>
<li>资料库</li>
<li>攻略中心</li>
</ul>
</li>
<li>
<ul>
<li>新手资料</li>
<li>资料库</li>
<li>攻略中心</li>
</ul>
</li>
<li>
<ul>
<li>新手资料</li>
<li>资料库</li>
<li>攻略中心</li>
</ul>
</li>
<li>
<ul>
<li>新手资料</li>
<li>资料库</li>
<li>攻略中心</li>
</ul>
</li>
</ul>
<div class="bg"></div>
</div>
</div>
</body>
</html>
把你这个例子可以分成上下两部分，因为无论上面放在哪个上面下面整体都出来，宽度的话上下的width都设置为100%即可，至于背影半透明的话，自己再加一个遮罩层定位于下面盒子里，宽高和盒子大小一样，然后z-Index设置低一点就可以了，如果只是给下面ul设置背景色的话，一旦设置透明度里面所有内容都会半透明的。
