最终样式
设置下拉框分为两个部分
第一:设置好下拉框
第二:下拉框不被下面的元素覆盖
这句话保证了下拉框不被覆盖: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;//去掉网页下横线