2-2 编程练习麻烦老师检查

来源：2-2 编程练习

milmilbaby

2020-11-11 16:48:11

老师，请问怎么默认Home背景向下延伸，然后鼠标划到别的导航项时Home背景又会缩回去？

在这里输入代码，可通过选择【代码语言】突出显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mymooc</title>
<style type="text/css">
*{margin:0;padding:0;color:#fff;}
a{text-decoration:none;}
header .container{width:100%;height:100px;background:#000;}
header .container a.logo{float:left;height:90px;margin-left:100px;font-size:20px;}
header .container a.logo img{padding-top:30px;}
header .container nav{float:right;margin-right:100px;}
header .container nav a{height:90px;width:90px;line-height:90px;display:block;text-align:center;float:left;}
header .container nav a.home{background:#FF0000;}
header .container nav a.course{background:#FFD700;}
header .container nav a.actual{background:#ADFF2F;}
header .container nav a.plan{background:#9370DB;}
header .container nav a.faq{background:#FF8C00;}
header .container nav a.notes{background:#1E90FF;}
header .container nav a.home:hover{padding-bottom:10px;}
header .container nav a.course:hover{padding-bottom:10px;}
header .container nav a.actual:hover{padding-bottom:10px;}
header .container nav a.plan:hover{padding-bottom:10px;}
header .container nav a.faq:hover{padding-bottom:10px;}
header .container nav a.notes:hover{padding-bottom:10px;}
</style>
</head>
<body>
<header>
<div class="container">
<a class="logo" href="#"><img src="http://climg.mukewang.com/582e5f160001b17100400040.png"/>  MYMOOC</a>
<nav>
<a class="home" href="#">Home</a>
<a class="course" href="#">Course</a>
<a class="actual" href="#">Actual</a>
<a class="plan" href="#">Plan</a>
<a class="faq" href="#">FAQ</a>
<a class="notes" href="#">Notes</a>
</nav>
</div>
</header>
</body>
</html>