css+html写下拉导航栏

来源：互联网发布：达观数据技术体系编辑：程序博客网时间：2024/05/24 01:39

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0px;padding: 0px;}.heading>li{border-radius: 10px;line-height: 37px;text-align: center;width: 60px;height: 37px;list-style: none;background-color:silver;}.heading>li>ul>li{width: 60px;height: 37px;height: 37px;list-style:none ;float: left;background-color:silver;border-radius: 10px;margin-top: 2px;display: none; /*隐藏下拉列表*/}.heading>li:hover ul li {/* 显示下拉列表  列表标签必须是触发标签的子级 如li是下拉菜单 */ background: red;   /*是由第一个li的hover状态触发显示   第二个li必须是第一个li的子级*/display: block;}.heading>li>ul>li>a{text-decoration: none;}.heading>li>ul{display: block;}</style></head><body><ul class="heading"><li><a class="xila">java</a><ul><li><a href="">1</a></li><li><a href="">2</a></li><li><a href="">3</a></li><li><a href="">4</a></li><li><a href="">5</a></li></ul></li></ul></body></html>

0 0