`
ganglong99
  • 浏览: 161348 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

CSS实现的下拉菜单

    博客分类：
  • CSS
下拉菜单 
阅读更多

     看看这个例子，完全用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>
分享到：
| 页面左侧隐藏弹出式菜单，跟随页面滚动！
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css实现下拉菜单

    css实现下拉菜单，鼠标移动到上面就可以显示下面的子菜单

    css实现下拉菜单透明资料

    总的来说，实现CSS下拉菜单的透明效果主要涉及`opacity`和`rgba()`这两个属性。通过灵活运用这些属性，你可以创造出多种风格的下拉菜单，同时保持其在不同浏览器中的兼容性。在实践中，应确保在不影响可读性和用户...

    css实现下拉菜单的相关图片

    通过以上步骤，我们已经创建了一个基本的CSS下拉菜单。图片资源可能包含不同设计风格的下拉菜单示例，如颜色搭配、布局变化等，你可以参考这些图片进行更个性化的设计。记得在实际项目中，要根据具体需求和用户习惯...

    CSS实现下拉菜单代码

    以上就是一个基本的CSS下拉菜单实现。当然，实际项目中可能需要考虑更多细节，比如响应式布局、多级下拉菜单、鼠标离开时的延迟隐藏等。这需要通过更复杂的CSS选择器和JavaScript来实现。在提供的压缩包文件中，应该...

    Css实现下拉菜单.doc

    本案例聚焦于使用CSS实现下拉菜单，这在网页交互设计中是常见且实用的功能...通过这个实训案例，学生不仅能掌握CSS下拉菜单的制作，还能深入理解CSS布局、选择器和交互效果的实现，为未来复杂的网页设计打下坚实基础。

    纯css多级下拉菜单兼容ie6+主流浏览器

    本文将深入探讨如何使用纯CSS实现兼容IE6+及主流浏览器的多级下拉菜单，帮助Web开发者提升用户体验，同时简化开发流程。 首先，让我们了解CSS（层叠样式表）的基本概念。CSS是一种用于描述HTML或XML（包括如SVG、...

    纯CSS控制实现下拉菜单效果-核心代码.html

    纯CSS控制实现的拉菜单效果，反复删改，只留下了核心代码，在最大程度上为需要的人留下了空间

    纯css实现下拉菜单

    在提供的`NetCssMenu.html`文件中，你应该能发现类似的代码实现，通过查看和分析这个文件，你可以加深对纯CSS下拉菜单实现的理解，并将其应用于自己的项目中。记住，实践是检验真理的唯一标准，动手尝试并不断调整，...

    DIV+CSS实现下拉菜单的实现

    使用DIV+CSS技术实现导航栏菜单的制作，鼠标经过每个菜单标题，它的子菜单就会出现。

    纯CSS实现下拉菜单

    纯CSS实现的下拉菜单，利用hover，直接双击即可在浏览器中运行测试

    javaScript+Div+css实现下拉菜单

    web中下拉菜单原理，即在用JavaScript控制不同DIV的现实和隐藏！

    css多级下拉菜单

    创建CSS多级下拉菜单涉及的关键知识点主要包括以下几个方面： 1. **盒模型与布局**：理解CSS的盒模型（content, padding, border, margin），掌握如何设置元素的宽高、内边距和外边距，以便为菜单项创建适当的间距...

    纯CSS实现下拉菜单的示例代码

    本篇文章主要介绍了纯CSS实现下拉菜单的示例代码，分享给大家，具体如下： 将下拉菜单的ul高度设置为0，并且超出部分隐藏掉。 设置下拉菜单的高度添加过渡效果，高度为auto时过渡效果失效。 &lt;style&gt; ul{ ...

    html5 css3下拉菜单.rar

    以下是一个简单的示例，展示了如何通过CSS实现下拉菜单的显示和隐藏： ```css .dropdown ul { display: none; } .dropdown li:hover &gt; ul { display: block; } .dropdown ul li { /* 这里可以添加子菜单项的...

    HTML+CSS实现下拉菜单的实现

    在本篇中，我们将深入探讨如何使用 HTML 和 CSS 实现一个下拉菜单，这是一个常见的网页设计功能，常用于导航栏中，以节省空间并提供多级导航。 首先，我们来看一下给出的代码实例。这个例子中，下拉菜单被包含在一...

    下拉菜单CSSdemo

    总的来说，掌握纯CSS下拉菜单的制作技巧对于前端开发者来说是非常重要的，它能够提升网站的用户体验，并帮助开发者更好地理解和运用CSS的高级特性。通过深入研究"下拉菜单CSSdemo"，你将能创建出更多个性化的菜单...

    css3下拉菜单插件

    本项目提供的"css3下拉菜单插件"是一个专门针对这一需求开发的工具，它允许设计师和开发者轻松实现多样化的下拉菜单效果，并且具有高度的可配置性。 首先，让我们来了解下拉菜单的基本概念。下拉菜单是一种常见的...

    css3 下拉菜单

    在CSS3之前，下拉菜单主要依赖JavaScript或复杂的CSS2技巧来实现，而CSS3则简化了这一过程，并增加了更多的视觉效果。 首先，让我们了解一下CSS3下拉菜单的基本结构。通常，下拉菜单由一个主菜单项和与其关联的子...

    HTML+CSS+JS实现的下拉菜单源码

    HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单源码HTML+CSS+JS实现的下拉菜单...

    CSS+JavaScript分别实现下拉菜单效果

    本主题将探讨如何利用CSS（层叠样式表）和JavaScript来分别实现下拉菜单的效果。 首先，我们来理解CSS在创建下拉菜单中的作用。CSS是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的语言。在下拉菜单...

Magicbox
Global site tag (gtag.js) - Google Analytics