CSS实现的下拉菜单

最新推荐文章于 2024-09-11 20:31:47 发布
最新推荐文章于 2024-09-11 20:31:47 发布
阅读量448 收藏 1
点赞数
分类专栏： JavaScript与CSS 文章标签： css generator javascript menu 报表 脚本
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ganglong99/article/details/3186686
版权

     看看这个例子，完全用CSS实现的下拉菜单，没有JavaScript脚本语言控制，比较简单，全是CSS样式的运用！

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.   <title> new document </title>
  5.   <meta name="generator" content="editplus" />
  6.   <meta name="author" content="" />
  7.   <meta name="keywords" content="" />
  8.   <meta name="description" content="" />
  9.  </head>
  10.   <style>
  12. ul li{
  13. width:100px;
  14. float:left;
  15. }
  16. ul li a{
  17. text-align:center;
  18. border-style:solid;
  19. border-color:black;
  20. border:1px;
  21. position:relative;
  22. display:block;
  23. width:80px;
  24. }
  25. ul li ul li a{
  26. display:block;
  27. background-color:#99FF00;
  28. }
  29. ul li ul li ul li a{
  30. display:block;
  31. background-color:#00FF99;
  32. width:auto;
  33. padding-left:10px;
  34. text-align:left;
  35. }
  36. ul li ul li ul li ul li a{
  37. background-color:#99FFFF;
  38. }
  39. ul li ul li{
  40. position:relative;
  41. left:-40px;
  42. padding-top:0px;
  43. top:0px;
  44. width:80px;
  45. }
  46. ul li ul li ul li{
  47. width:140px;
  48. position:relative;
  49. left:30px;
  51. }
  52. li ul{
  53. display:none;
  54. }
  55. li:hover>ul{
  56. display:block;
  57. }
  58. li:hover ul{
  59. width:80px;
  60. height:150px;
  61. }
  62. li:hover ul li:hover{
  63. position:relative;
  64. height:19px;
  65. }
  66. a:hover{
  67. color:#0099cc;
  68. background-color:white;
  69. }
  70. li:hover ul li:hover ul{
  71. position:relative;
  72. margin-top:-20px;
  73. left:12px;
  75. }
  76. li:hover ul li:hover ul li:hover ul{
  77. position:relative;
  78. left:70px;
  79. }
  82.  </style>
  83.  <body>
  84.  <div id="menu">
  85.   <ul>
  86.     <li><a href="#">服务配置</a>
  87.         <ul>
  88.             <li><a href="#">公共配置</a>                    
  89.                 <ul>
  90.                     <li><a href="#">网关公用主配置表</a></li>    
  91.                     <li><a href="#">本地SP</a></li>
  92.                 </ul>
  93.             </li>    
  94.             <li><a href="#">AGENT</a>                   
  95.                 <ul>
  96.                     <li><a href="#">bbb</a></li>     
  97.                     <li><a href="#">CCccccC</a></li>
  98.                 </ul>
  99.             </li>    
  100.             <li><a href="#">KERNEL</a>                  
  101.                 <ul>
  102.                     <li><a href="#">bbb</a></li>     
  103.                     <li><a href="#">CCccccC</a></li>
  104.                 </ul>
  105.             </li>
  106.         </ul>
  107.     </li>  
  108.     <li><a href="#">报表统计</a>
  109.         <ul>
  110.             <li><a href="#">bbbbb</a></li>   
  111.             <li><a href="#">CCcccc</a>                  
  112.                 <ul>
  113.                     <li><a href="#">bbbbbbbbbbb</a></li>     
  114.                     <li><a href="#">CCccC</a></li>
  115.                 </ul>
  116.             </li>    
  117.             <li><a href="#">CCccccccC</a>                   
  118.                 <ul>
  119.                     <li><a href="#">bbbbbbb</a></li>     
  120.                     <li><a href="#">CCcccC</a></li>      
  121.                     <li><a href="#">CCccccC</a>                 
  122.                         <ul>
  123.                             <li><a href="#">bbbbbb</a></li>  
  124.                             <li><a href="#">CCcccC</a></li>
  125.                         </ul>
  126.                     </li>
  127.                 </ul>
  128.             </li>
  129.         </ul>
  130.     </li>
  131.     <li><a href="#">修改密码</a></li>
  132.     <li><a href="#">网管管理</a>
  133.         <ul>
  134.             <li><a href="#">bbbb</a></li>        
  135.             <li><a href="#">CCcccC</a>                  
  136.                 <ul>
  137.                     <li><a href="#">bbbbbbb</a></li>     
  138.                     <li><a href="#">CCccC</a></li>
  139.                 </ul>
  140.             </li>
  141.             <li><a href="#">CCC</a>                 
  142.                 <ul>
  143.                     <li><a href="#">bbb</a></li>     
  144.                     <li><a href="#">CCcccC</a></li>
  145.                 </ul>
  146.             </li>
  147.         </ul>
  148.     </li>
  149.   </ul>
  150.   </div>
  151.  </body>
  152. </html>
ganglong99
关注
专栏目录
html-jquery多语言选择下拉框
02-27
使用js判断用户流览器语言，然后导入相关的css进行显示。只需要简单修改就可以用于自己的项目。可用于pc端和移动端 web前端开发(深圳)群： 73269871
纯css实现下拉菜单(超详细)
热门推荐
qq_28919991的博客
09-26 4万+
纯css写下拉菜单(超详细) ps：博主第一次发文章，不足之处还请指出 话不多说，直接进入正题吧 用ul 和 li标签写一个关联结构(ul 和 li的父子关系浑然天成，一般的关联结构都用它们) &amp;amp;lt;ul class=&amp;quot;nav&amp;quot;&amp;amp;gt; &amp;amp;lt;a href=&amp;quot;#&amp;quot;&amp;amp;gt;服装&amp;a
select的练习，实现一个下拉选择语言
qq_35898865的博客
03-09 896
select的练习，实现一个下拉选择语言 在同一个文件夹里创建：index.html 和 core.js HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>语言选择框</title> ...
HTML+CSS实现下拉菜单的实现
09-22
在本篇中，我们将深入探讨如何使用 HTML 和 CSS 实现一个下拉菜单，这是一个常见的网页设计功能，常用于导航栏中，以节省空间并提供多级导航。 首先，我们来看一下给出的代码实例。这个例子中，下拉菜单被包含在一...
css实现下拉菜单
06-30
css实现下拉菜单，鼠标移动到上面就可以显示下面的子菜单
纯CSS实现下拉菜单的示例代码
01-19
本篇文章主要介绍了纯CSS实现下拉菜单的示例代码，分享给大家，具体如下： 将下拉菜单的ul高度设置为0，并且超出部分隐藏掉。 设置下拉菜单的高度添加过渡效果，高度为auto时过渡效果失效。 <style> ul{ ...
Css实现下拉菜单.doc
07-07
本案例聚焦于使用CSS实现下拉菜单，这在网页交互设计中是常见且实用的功能...通过这个实训案例，学生不仅能掌握CSS下拉菜单的制作，还能深入理解CSS布局、选择器和交互效果的实现，为未来复杂的网页设计打下坚实基础。
CSS —— 界面布局
m0_73557953的博客
09-10 987
采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
S筱潇S四维Smile
09-11 361
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
CSS 常用元素属性
最新发布
2301_79881188的博客
09-11 935
CSS 属性有很多, 可以参考文档。
CSS“多列布局”（补充）——WEB开发系列35
一条晒干的咸鱼的博客
09-10 699
多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。
《HTML 与 CSS—— 响应式设计》
asd4353012的博客
09-11 1529
HTML 和 CSS 在响应式设计中起着至关重要的作用。通过使用语义化标签、响应式图像、媒体查询、弹性布局和响应式网格系统等技术，可以实现网页在不同设备上的自适应显示，提供最佳的用户体验。在进行响应式设计时，要遵循移动优先设计、内容优先和测试优化等最佳实践，不断提高网页的质量和性能。随着移动设备的普及和技术的不断发展，响应式设计将变得越来越重要，开发者需要不断学习和掌握新的技术和方法，以满足用户的需求。
水平居中的几种方法（总结）
致未来的你。的博客
09-11 751
水平居中的几种方法（总结）
css鼠标移动过去变成手的图标
qq_38880880的博客
09-10 365
【代码】css鼠标移动过去变成手的图标。
CSS基本语法结构
nice66660的博客
09-10 1342
*某某[属性|=属性值] 选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 *//*某某[属性~=属性值] 选择到的是a标签且有class属性,且属性值有完整的itme词的变 *//*某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一模一样的，多一个空格都不行 *//*某某[属性^=属性值] a标签有class属性且属性值是li开头的 *//*某某[属性$=属性值] a标签有class属性且属性值结尾是t的变 */
如何利用 CSS 渐变实现多样化背景效果
weixin_63625059的博客
09-10 869
总在平常看到像这样的图片 背景是如何实现的呢 背景效果的多样性和美观性直接影响用户体验。CSS 渐变为设计师提供了一种强大且灵活的方法来创建引人注目的背景。渐变是颜色之间平滑过渡的效果，通过调整渐变类型和设置，你可以轻松实现从简单到复杂的各种背景效果。在日常开发中 有很多需要用到渐变的地方，这片文章来总结一下来看MDN是如何说的CSS 渐变由 [] 数据类型表示，它是 [] 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。
CSS中 nth-child 与 nth-of-type 的区别
qq_62512874的博客
09-11 585
nth-child和都是强大的CSS选择器，能够帮助我们更加灵活地选择和样式化页面元素。nth-child选择的是所有子元素的顺序，而只考虑同类型元素的顺序。在实际开发中，根据具体的需求选择合适的伪类选择器，能够使你的CSS更加简洁和高效。通过合理使用这两个选择器，可以简化很多复杂的样式逻辑，尤其是在处理动态内容或复杂的HTML结构时非常有用。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 4772
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
使用css实现下拉菜单
05-23
下面是一个简单的示例，使用CSS实现下拉菜单： HTML代码： ``` 下拉菜单 选项一 选项二 选项三 ``` CSS代码： ``` /* 隐藏下拉菜单内容 */ .dropdown-content { display: none; } /* 鼠标悬停在按钮...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值