700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > html 二级页面 教程 css 实现动态二级菜单

html 二级页面 教程 css 实现动态二级菜单

时间:2023-10-06 13:17:54

相关推荐

html 二级页面 教程 css 实现动态二级菜单

动态实现简单的二级菜单

当鼠标放到一级标签上时,鼠标会变成小手的形状 展示二级菜单,源码如下,复制即可直接使用

Document

* {margin: 0; padding: 0;}

ul { list-style: none;}

div {

width: 100%;

height: 50px;

background-color: #ccc;

}

.first {

width: 100px;

height: 50px;

float: left;

margin-right: 70px;

/* background-color: pink; */

cursor: pointer;

text-align: center;

line-height: 50px;

border-radius: 15px;

}

.second li{

width: 80px;

height: 50px;

background-color: blue;

border-radius: 50%;

margin-top: 10px;

}

.second {

display: none;

}

.first:hover .second{

display: block;

cursor: pointer;

}

.first:hover {

background-color: pink;

}

一级标签

二级标签二级标签

一级标签

二级标签二级标签

总结

到此这篇关于css 实现动态二级菜单的文章就介绍到这了,更多相关css 动态二级菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。