css最后一条样式，为什么没有作用
注：
下拉框写在body最后
下拉框的样式写在css最后
想要在鼠标移动到，头部标签的设置里出现下拉框。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Baidu</title>
<link rel="stylesheet" href="../../base.css"><!--清除默认样式-->
<style>
header{
float: right;/*导航条右飘*/
margin:19px 0 5px 0;/*留点白*/
padding-right:96px;/*给更多产品留位置*/
position:absolute;/*绝对定位*/
right:0;
top:0;/*绝对定位的值*/
background-color: #fff;
}
header a{
display: inline-block;/*设置成行内块元素*/
font-weight:700;/*字重，加粗*/
font-size:13px;
line-height: 24px;/*行高给了24px*/
color:#333;
margin-left:20px;/*每个a标签左边空24个像素*/
text-decoration:underline;/*加下划线*/
overflow:hidden;/*裁剪?*/
}
header a:hover{
color:#00c;
}
#highlight{
color:#f23f40;/*抗击肺炎，字变红*/
}
#highlight:after{/*抗击肺炎右上角加红点*/
content:' ';/*结尾内容*/
background-color: #f23f40;/*颜色*/
width: 6px;
height: 6px;
border-radius: 50%;/*变成圆形*/
position:absolute;/*绝对定位后才能变成圆形*/
}
header a:nth-of-type(1n+8){/*选中登录和设置*/
font-weight:400;
}
#more{/*更多产品*/
display:inline-block;
position: absolute;
right:10px;
width:60px;
height:23px;
color:white;
background:#38f;
margin:0 2px 0 19px;
text-align:center;
line-height:23px;
border-bottom:1px solid #38f;
font-weight:400;
font-size:13px;
}
main{/*抄百度的方法，暂时不知道为什么设置*/
width:auto;
height:38.2%;
min-height: 293px;
font-size:0;/*b站学到的方法，input和button间距*/
}
#content{/*规定输入框和按钮的宽度范围*/
width:642px;/*642*/
height:100%;
min-height:293px;
margin:0 auto;
text-align:left;
}
#content div{
height:100%;
}
#content div div{/*图片的大小和居中*/
height: 68%;
min-height:181px;
text-align: center;
position:relative;
z-index: 0;
margin-top: 40px;
}
a img{/*图片位置*/
position: absolute;
bottom:10px;
left:50%;/*他们给了50%*/
margin-left: -135px;/*然后又用了margin居中*/
}
#camera{/*搜索框相机*/
position:absolute;
right:11px;
top:50%;/*用来绝对定位*/
width:18px;
height:16px;/*设置大小*/
background:#fff url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/soutu/img/camera_new_5606e8f.png) no-repeat;
margin-top:-8px;
}
#camera:hover{/*雪碧图的用法，往下挪了点位置*/
background-position:0 -20px;/*用雪碧图下面的图片*/
}
#inputbar{/*规定搜索框大小*/
display: inline-block;
height:34px;
width:539px;
border:1px solid #b6b6b6;
margin-right:0;
border-right-width:0;/*右边框设置没有*/
border-color:#b8b8b8 transparent #ccc #b8b8b8;
vertical-align:top;/*上基线*/
position:relative;/*定位*/
}
#input{/*真正的搜索框*/
width:526px;
height: 22px;
font: 16px/34px Arial;
line-height: 22px;
padding: 0;
margin:6px 0 0 7px;
}
#inputbar:focus-within{/*鼠标点击搜索框*/
border:1px solid rgb(77, 144, 254);/*点击后的边框颜色*/
border-right: none;/*右边不要*/
}
#bottonbar{/*按钮*/
vertical-align:top;/*和搜索框上基线对齐*/
display:inline-block;
border-bottom:1px solid transparent;/*底部边框*/
}
#botton{/*按钮大小、字体、颜色设置*/
width: 100px;
height:36px;
font-size: 15px;
color:#fff;
letter-spacing: 1px;/*字符间距*/
background-color: #3385ff;
cursor:pointer;/*鼠标移到button上会变成一只手*/
border-bottom:1px solid #2d78f4;/*底部边框*/
}
#botton:hover{/*鼠标移到按钮阴影效果*/
box-shadow:1px 1px 1px #ccc;
}
.bottom{/*二维码div*/
text-align: center;
position:absolute;
bottom:132px;/*定位，离底部132px高*/
width:100%;
}
#qrcodebar{/*包裹二维码的div，暂时不知道为什么这么做*/
display: inline-block;
}
#qrcode-img{/*二维码图*/
background: url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/qrcode/zbios_old-09b6296ee6.png) 5px 5px no-repeat;
width: 106px;/*background:url() 0 0 no-repeat。0 0 表示背景图定位*/
height:106px;/*大小*/
margin: 0 auto;
padding:5px;
border:1px solid #f3f3f3;/*二维码外边的框*/
}
#qrcode-text p:first-child{/*二维码下面字的设置*/
color: #333;
font-size:16px;
line-height: 32px;
letter-spacing:3px;/*字符间距*/
text-align: center;
}
#qrcode-text p:last-child{/*二维码最后一行字的设置*/
color:#999;
font-size: 14px;
line-height: 14px;
font-weight: 300;
text-align:center;
}
footer{/*底部设置*/
height: 40px;
width:100%;/*大小*/
min-width:1250px;
position:fixed;/*固定定位*/
bottom:0;
left: 0;
margin:0;/*固定定位的值*/
background-color: #fafafa;/*背景色*/
line-height: 40px;/*字体居中*/
}
footer a{/*底部链接的颜色*/
color:#999;
}
#left a:hover,#right a span:hover{
color:#333;/*底部a标签鼠标移动上去的颜色*/
}
#left{/*底部左边*/
float: left;/*浮动*/
font-size: 12px;
}
#left p{
display: inline;/*估计是浮动了，所以改回行内显示*/
margin-right: 20px;
}
#left p:first-child{/*设置离左边的距离*/
margin-left: 30px;
}
#right{
float:right;/*右边的右浮动*/
color:#bbb;
}
#right span{
margin-right:20px;/*字符右边距*/
}
#right span:last-child{
margin-right:30px;/*最后一个离网页的边距*/
}
#box{/*装下拉框的盒子*/
display:block;
width:70px;/*下拉框宽度*/
background-color: #fff;
border:1px solid #d1d1d1;
box-shadow:1px 1px 5px #d1d1d1;/*阴影效果*/
position: absolute;/*我自己调的位子*/
top:53px;
right:72px;
}
#box em,#box i{/*下拉框的顶部小三角*/
width:0;
height:0;
font-size: 0;
line-height: 0;
display: block;
border:6px solid transparent;
border-style:dashed dashed solid;/*看资料是虚线*2，实线*/
margin:-12px 0 0 28px;/*我自己调的位置*/
position: absolute;
}
#box em{/*下拉框三角形*/
border-bottom-color: #d8d8d8;
top:-1px;
}
#box i{/*下拉框三角形*/
border-bottom-color: #fff;
top:0;
}
#menu a{/*下拉框a标签设置*/
display: block;
text-align: left;
margin:0;
padding:0;
padding:0 9px;
line-height:26px;
text-decoration: none;
}
#menu a:hover{/*移动到下拉框里面的效果*/
background: #38f;
color:#fff;
}
#xiala:hover #box{
display:none;
}
</style>
</head>
<body>
<header>
<a id="highlight" target="_blank" href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_1">抗击肺炎</a>
<a target="_blank" href="http://news.baidu.com/">新闻</a>
<a target="_blank" href="https://www.hao123.com/">hao123</a>
<a target="_blank" href="https://map.baidu.com/">地图</a>
<a target="_blank" href="http://v.baidu.com/">视频</a>
<a target="_blank" href="https://tieba.baidu.com/">贴吧</a>
<a target="_blank" href="http://xueshu.baidu.com/">学术</a>
<a target="_blank" href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5">登录</a>
<a id="xiala" href="https://www.baidu.com/gaoji/preferences.html">设置</a>
<div id="more">
更多产品
</div>
</header>
<main>
<div id=content>
<div>
<div>
<a href="http://baidu.com">
<img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129">
</a>
</div>
<span id="inputbar">
<span id="camera"></span>
<input type="text" id="input">
</span>
<span id="bottonbar">
<button id="botton">百度一下</button>
</span>
</div>
</div>
<div class="bottom">
<div id="qrcodebar">
<div id="qrcode">
<div id="qrcode-img"></div>
<div id="qrcode-text">
<p>下载百度APP</p>
<p>有事搜一搜 没事看一看</p>
</div>
</div>
</div>
</div>
</main>
<footer>
<div id="left">
<P><a target="_blank" href="http://www.baidu.com/cache/sethelp/index.html">设为首页</a></P>
<P><a target="_blank" href="http://home.baidu.com">关于百度</a></P>
<P><a target="_blank" href="http://ir.baidu.com">About Baidu</a></P>
<P><a target="_blank" href="http://e.baidu.com/?refer=888">百度推广</a></P>
<P><a target="_blank" href="http://www.baidu.com/duty">使用百度前必读</a></P>
<P><a target="_blank" href="http://help.baidu.com/newadd?prod_id=1&category=4">意见反馈</a></P>
<P><a target="_blank" href="http://help.baidu.com">帮助中心</a></P>
</div>
<div id="right">
<span>©2020 Baidu </span>
<span>(京)-经营性-2017-0020</span>
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">
<span>京公网安备11000002000001号</span>
</a>
<span>京ICP证030173号</span>
</div>
</footer>
<div id="box">
<div id="menu">
<em></em>
<i></i>
<a href="javascript:;">搜索设置</a>
<a href="http://www.baidu.com/gaoji/advanced.html">高级搜索</a>
<a href="javascript:;">高级搜索</a>
<a href="http://https://www.baidu.com/duty/privacysettings.html">隐私设置</a>
</div>
</div>
</body>
</html>
