怎么使用CSS:hover伪类
这篇文章给大家分享的是有关怎么使用CSS:hover伪类的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
在运城等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站设计制作、网站设计 网站设计制作按需设计,公司网站建设,企业网站建设,高端网站设计,成都全网营销,外贸网站制作,运城网站建设费用合理。
以下示例将向您展示如何使用CSS实现简单的下拉菜单。
例试试这个代码»
ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a {
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul.dropdown {
min-width: 100%; /* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown {
display: block; /* Display the dropdown */
}
ul li ul.dropdown li {
display: block;
}
感谢各位的阅读!关于“怎么使用CSS:hover伪类”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
本文名称:怎么使用CSS:hover伪类
标题路径:http://myzitong.com/article/jcgjos.html