【ITEYE】css创建鼠标悬停下拉菜单样式

灰太狼 2021-12-18 07:39 417阅读 0赞

原文链接：[http://1175644344.iteye.com/blog/2331973][http_1175644344.iteye.com_blog_2331973]

下拉菜单在网站中到处可见。

下面用css设置下拉菜单样式。

Html代码 ![收藏代码][icon_star.png]

1.  <!DOCTYPE html> 
2.  <html> 
3.  <head> 
4.  <title>淘宝</title> 
5.  <meta charset="utf-8"> 
6.  <body> 
7.  <div class=dropdown> 
8.  <button class="dropbtn">我的淘宝</button> 
9.  <div class="dropdown-content"> 
10. <a href="\#">已买到的宝贝</a> 
11. <a href="\#">我的足迹</a> 
12. </div> 
13. </div> 
14. </body> 
15. </html>

css来设置样式

Css代码 ![收藏代码][icon_star.png]

1.  .dropdown-content \{
2.  display: none;//隐藏下拉菜单的内容
3.  position: absolute;
4.  \#f9f9f9;
5.  min-width: 160px;最小宽度
6.  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);//做边框阴影 
7.  \}
8.  .dropdown-content a:hover \{
9.  \#f1f1f1
10. \}
11. //hover设置光标悬停未点击之前的样式
12. 
13. .dropdown:hover .dropdown-content \{
14. display: block;
15. \}//鼠标悬停显示下拉菜单
16. 
17. .dropdown:hover .dropbtn \{
18. \#f5f5f5;
19. \}

转载于:https://www.cnblogs.com/msmailcode/articles/6116998.html

[http_1175644344.iteye.com_blog_2331973]: http://1175644344.iteye.com/blog/2331973
[icon_star.png]: /images/20211218/9920fc1c212a45f58873610121d1f650.png

发表评论取消回复

表情：

评论列表（有 0 条评论，417人围观）

还没有评论，来说两句吧...

相关阅读

相关鼠标悬浮导航栏显示下拉菜单

在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法，html和css样式就不贴代码了。 1、原生js <script> // window.

布满荆棘的人生/ 2022年10月27日 05:24/ 0 赞/ 433 阅读

相关 html鼠标经过自动下拉菜单,js css鼠标悬停显示下拉菜单

个人信息维护学生信息修改修改密码\--%> 修改密码\--%> 修改密码--%> 退出登录用户：

傷城~/ 2022年10月05日 13:57/ 0 赞/ 387 阅读

相关 html下拉列表鼠标悬浮自动先出来,下拉菜单/下拉列表鼠标提示ToolTip【JQuery实现】...

本文介绍如何使用JQuery给下拉菜单/下拉列表增加鼠标提示(ToolTip)。 ![aa919629334475c7ce7dd6f9f0595d4b.gif][] 下拉列

电玩女神/ 2022年10月05日 13:00/ 0 赞/ 341 阅读

相关 jquerty鼠标移上显示隐藏菜单简洁下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

快来打我*/ 2022年09月26日 12:57/ 0 赞/ 251 阅读

相关如何用css样式改变下拉菜单的样式？

敲下如下代码： <select> <option>option1</option> <option>option2</option>

Myth丶恋晨/ 2022年09月21日 04:57/ 0 赞/ 476 阅读

相关最简单的鼠标悬停,实现下拉列表功能 bootstrap

<html> //最简单的鼠标悬停,实现下拉功能,应用bootstrap框架的知识,不会bootstrap自己百度怎么使用 <head>![SouthEast][]

Myth丶恋晨/ 2022年07月12日 07:59/ 0 赞/ 184 阅读

相关修改鼠标悬停样式

一般我们在浏览网页的时候，我们的鼠标只有三种样式，分别为text(遇到文本内容时，I)，pointer(遇到超链接，手指形状),和default(没遇到实际内容

朱雀/ 2022年06月09日 02:55/ 0 赞/ 308 阅读

相关 css横排菜单实现鼠标悬停更改样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

冷不防/ 2022年05月17日 21:17/ 0 赞/ 249 阅读

相关【ITEYE】css创建鼠标悬停下拉菜单样式

原文链接：[http://1175644344.iteye.com/blog/2331973][http_1175644344.iteye.com_blog_2331973]

灰太狼/ 2021年12月18日 07:39/ 0 赞/ 418 阅读

相关 echart 鼠标悬停和离开不同样式

label: { normal: { textStyle: {

向右看齐/ 2021年07月26日 15:09/ 0 赞/ 460 阅读