/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qq飞车</title>
<style>
*{padding: 0;margin: 0;}
img{display: block;}
header{height: 40px;width: 100%;}
a{text-decoration: none;color: white;}
ul,li{list-style: none;}
.r{float: right;}
.l{float: left;}
.conta{width: 1080px;margin: 0 auto;}
hgroup>a{float: left;display: block;width: 220px;height: 41px;}
hgroup>a:first-child{background: url(./images/ost-bg.png) no-repeat 0 -38px;margin-right: 8px;}
hgroup>span{float: right;margin-left: 20px;line-height: 40px;
background: url(./images/ost-bg.png) no-repeat;}
hgroup>span:first-child{ background-position: right -75px;padding-right: 18px;}
hgroup>span:last-child{background-position:left -80px;padding-left: 20px;}
main{background: url(./images/bg20190104.jpg) no-repeat;width: 100%;}
main .main-list{height: 60px;background: rgb(44, 41, 41);opacity: .5;border: 1px skyblue solid;}
main .main-list>ul{height: 236px;}
main .main-list>ul>li{float: left;margin-left:40px;height: 60px;}
main .main-list>ul>p {font-size:16px;font-weight: bold;margin-top:10px;}
main .main-list>ul>li>span{font-size:10px;}
.clear::after{content: "";display: block;clear:both;}
.aa{background-color: red;}
</style>
</head>
<body>
<header >
<div class="conta">
<hgroup class="l">
<a href="#"></a>
<a href="#"><img src="./images/ad.jpg" alt=""></a>
</hgroup>
<hgroup class="r">
<span>成长守护平台</span>
<span>腾讯游戏排行榜</span>
</hgroup>
</div>
</header>
<main class="clear">
<div class="main-list conta ">
<ul class=" ">
<li><a href="#"><p>首页</p><span>HOME</span></a></li>
<li><a href="#"><p>游戏资料</p><span>GAME</span></a>
<ul>
<li>新手指导</li>
<li>官方漫画<span>H</span></li>
<li>飞车手游<i>N</i></li>
<li>精美壁纸</li>
<li>游戏下载</li>
</ul>
</li>
<li><a href="#"><p>赛事中心</p><span>RACE</span></a>
<ul>
<li>SSC<span>H</span></li>
<li>谁是车王</li>
<li>全民争霸</li>
</ul>
</li>
<li><a href="#"><p>活动中心</p><span>EVENT</span></a>
<ul>
<li>版本专区<span>H</span></li>
<li>合作专区</li>
<li>CDK兑换</li>
</ul>
</li>
</ul><div class="aa">aaaaaaaaaaaaaaaaaaa</div>
<div class="aa">aaaaaaaaaaaaaaaaaaa</div>
<div class="aa">aaaaaaaaaaaaaaaaaaa</div>
</div>
</main>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qq飞车</title>
<style>
* {
padding: 0;
margin: 0;
}
img {
display: block;
}
header {
height: 40px;
width: 100%;
}
a {
text-decoration: none;
color: white;
}
ul,
li {
list-style: none;
}
.r {
float: right;
}
.l {
float: left;
}
.conta {
width: 1080px;
margin: 0 auto;
}
hgroup>a {
float: left;
display: block;
width: 220px;
height: 41px;
}
hgroup>a:first-child {
background: url(./images/ost-bg.png) no-repeat 0 -38px;
margin-right: 8px;
}
hgroup>span {
float: right;
margin-left: 20px;
line-height: 40px;
background: url(./images/ost-bg.png) no-repeat;
}
hgroup>span:first-child {
background-position: right -75px;
padding-right: 18px;
}
hgroup>span:last-child {
background-position: left -80px;
padding-left: 20px;
}
main {
background: #F4C6A6;
width: 100%;
}
main .main-list {
height: 60px;
background: rgb(44, 41, 41);
opacity: .5;
border: 1px skyblue solid;
}
main .main-list>ul {
height: 236px;
}
main .main-list>ul>li {
float: left;
margin-left: 40px;
/*height: 60px;*/
}
main .main-list>ul>li a{
display: block;
height:60px;
}
main .main-list>ul>p {
font-size: 16px;
font-weight: bold;
margin-top: 10px;
}
main .main-list>ul>li>span {
font-size: 10px;
}
.clear::after {
content: "";
display: block;
clear: both;
}
.aa {
background-color: red;
}
</style>
</head>
<body>
<header>
<div class="conta">
<hgroup class="l">
<a href="#"></a>
<a href="#"><img src="./images/ad.jpg" alt=""></a>
</hgroup>
<hgroup class="r">
<span>成长守护平台</span>
<span>腾讯游戏排行榜</span>
</hgroup>
</div>
</header>
<main class="clear">
<div class="main-list conta ">
<ul class=" ">
<li>
<a href="#">
<p>首页</p><span>HOME</span></a>
</li>
<li>
<a href="#">
<p>游戏资料</p><span>GAME</span></a>
<ul>
<li>新手指导</li>
<li>官方漫画<span>H</span></li>
<li>飞车手游<i>N</i></li>
<li>精美壁纸</li>
<li>游戏下载</li>
</ul>
</li>
<li>
<a href="#">
<p>赛事中心</p><span>RACE</span></a>
<ul>
<li>SSC<span>H</span></li>
<li>谁是车王</li>
<li>全民争霸</li>
</ul>
</li>
<li>
<a href="#">
<p>活动中心</p><span>EVENT</span></a>
<ul>
<li>版本专区<span>H</span></li>
<li>合作专区</li>
<li>CDK兑换</li>
</ul>
</li>
</ul>
<div class="aa">aaaaaaaaaaaaaaaaaaa</div>
<div class="aa">aaaaaaaaaaaaaaaaaaa</div>
<div class="aa">aaaaaaaaaaaaaaaaaaa</div>
</div>
</main>
</body>
</html>
ul，li都属于块级标签，在没有设定宽高的情况下是不会自动被内容撑开的，并且二者没有默认的最小宽高，所以你这不设置宽高，是无法撑开的。
希望有帮助