html 设置下拉框以及下拉框不被覆盖,改变颜色

最终样式
在这里插入图片描述

设置下拉框分为两个部分
第一：设置好下拉框
第二：下拉框不被下面的元素覆盖
这句话保证了下拉框不被覆盖：position:absolute;z-index:10;
其中z-index:10
这里面的数值越大表示优先级越高，当优先级高于其他下面的标签时，拉下来就不会被覆盖
第三：鼠标碰到是改变背景颜色
代码

<style>
 dl {height: 50px;width: 133px; display: none; margin-top: 1px; text-align: center; position:absolute;z-index:10;}
            dl dt{padding: 5px;}
            div:hover dl{ display: block;}
            dt:hover{ background-color:#06C;}
            a{ text-decoration: none;padding: 5px;}
</style>
<body>
     <div >aaa
                <dl>
                    <dt><a href="http://www.baidu.com">淘宝</a></dt>
                    <dt><a href="http://www.baidu.com">百度</a></dt>
                    <dt><a href="http://www.baidu.com">QQ</a></dt>
                </dl>
               </div> 
</body>

注释
//将下拉框和aaa放在一个标签里面，这样鼠标碰到aaa时就显示下拉框
div:hover dl{ //对鼠标进行操作鼠标碰到dl时 dl页面从disply:none->display:block 即从隐藏到显示
display: none; //dl 处于隐藏，鼠标碰到才会显示
z-index:10; //保证下拉框不被其他页面覆盖
text-decoration: none;//去掉网页下横线

原文链接：https://blog.csdn.net/mysnsds/article/details/119513477