oooomg
oooomg
采纳率0%
2020-04-16 23:08

小白求助,帮忙看看css下拉框为什么没有作用

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&amp;tpl=mn&amp;u=http%3A%2F%2Fwww.baidu.com%2F&amp;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>有事搜一搜&nbsp;&nbsp;没事看一看</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&nbsp;Baidu&nbsp;</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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • wojiushiwo945you 毕小宝 1年前

    已经有 menu 形式的下拉菜单了呢。
    图片说明

    点赞 1 评论 复制链接分享