HTML中鼠标悬浮时的下拉菜单用CSS怎么做
2个回答
2016-11-12 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
最好是用JS做，但是非要用CSS呢，也可以。如下是我以前写的一个CSS下拉，你可以参考一下：
<html> <head> <title></title> <style>*{margin:0;padding:0;} ul,li{ list-style-type:none; padding:0; margin:0; } #nav li a{ display:block; width:100px; text-align:center; text-decoration:none; color:#ffffff; background-color:#000000; } #nav li{ position:relative; margin-bottom:2px;float:left;margin-right:5px; } #nav li ul{ position:absolute; left:10px; top:20px; display:none;width:100px; } #nav li:hover ul{ display:block; } </style> </head> <body><ul id="nav"><li><a href="#">首页</a></li><li><a href="#">关于我们</a><ul><li>我们的故事</li><li>我们的团队</li></ul></li><li><a href="#">我们的服务</a><ul><li>网页设计</li>键稿<li>页面制作</li><li>程序开发</li></ul></li><li><a href="#">联系我们</a><ul><li>清含团队主力</li><li>团稿正孝队成员</li></ul></li></ul> </body></html>
<html> <head> <title></title> <style>*{margin:0;padding:0;} ul,li{ list-style-type:none; padding:0; margin:0; } #nav li a{ display:block; width:100px; text-align:center; text-decoration:none; color:#ffffff; background-color:#000000; } #nav li{ position:relative; margin-bottom:2px;float:left;margin-right:5px; } #nav li ul{ position:absolute; left:10px; top:20px; display:none;width:100px; } #nav li:hover ul{ display:block; } </style> </head> <body><ul id="nav"><li><a href="#">首页</a></li><li><a href="#">关于我们</a><ul><li>我们的故事</li><li>我们的团队</li></ul></li><li><a href="#">我们的服务</a><ul><li>网页设计</li>键稿<li>页面制作</li><li>程序开发</li></ul></li><li><a href="#">联系我们</a><ul><li>清含团队主力</li><li>团稿正孝队成员</li></ul></li></ul> </body></html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
首先 一般HTML中的动态效果都是JS做的，不太推荐用CSS完成。
下面给出一小段CSS代码 仅供参考：
.dropdown-content {
胡神 display: none;//隐藏下拉菜单的内容
position: absolute;
background-color: #f9f9f9;
min-width: 160px;最小宽度
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);//做边框阴影
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
//hover设置光标悬停未点击之前的样式
.dropdown:hover .dropdown-content {
培做手 display: block;
}//鼠标悬停显示下拉菜单
.dropdown:hover .dropbtn {
background-color: #f5f5f5;
}首先定义一个 dropdown的类 然后定义 HOVER的伪类实现一些配嫌特效。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
