`

纯DIV+CSS下拉菜单模块模板

前端积累 
阅读更多

纯div css的下拉菜单导航
 

css下拉菜单样式

在很多公司企业型网站中，很多会用到下拉菜单的导航，对于很多css新手来是比较麻烦的一件事，接下来我们提供我们整理一套css下拉菜单源代码，源文件。
 

  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>CSS下拉菜单实例模块-www.divcss5.com</title> 
  6. <style> 
  7. body,ul,li{background-color:white;font-size:12px;
    font-family:Arial, Helvetica, sans-serif;margin:0px; padding:0px;} 
  8. a{ color:#000000; text-decoration:none;} 
  9. body{text-align:center; } 
  10. li{display:inline;list-style:none;list-style-position:outside;
    text-align:center;font-weight:bold; float:left;} 
  11. .list a:link{color:#336601;text-decoration:none;float:left;
    width:100px;padding:3px 5px 0px 5px;} 
  12. .list a:visited{color:#336601;text-decoration:none;float:left;
    padding:3px 5px 0px 5px;width:100px;} 
  13. .list a:hover{color:white;float:left;padding:3px 3px 0px 20px;
    width:88px;text-decoration:none;background-color:#539D26;} 
  14. .list a:active{color:white;float:left;padding:3px 3px 0px 20px;
    width:88px;text-decoration:none; background-color:#BD06B4;} 
  15. #nav{width:600px;height:30px; margin:0 auto;padding:0px 5px;
     text-align:center; clear:both;} 
  16. .list{line-height:20px;text-align:left;padding:4px;font-weight:normal;} 
  17. .menu1{width:120px;height:auto;margin:6px 4px 0px 0px;
    border:1px solid #9CDD75;background-color:#F1FBEC;color:#336601;
    padding:6px 0px 0px 0px;cursor:hand;
    overflow-y:hidden;filter:Alpha(opacity=70);-moz-opacity:0.7;} 
  18. .menu2{width:120px;height:18px;margin:6px 4px 0px 0px;
    background-color:#F5F5F5;color:#999999;border:1px solid #EEE8DD;
    padding:6px 0px 0px 0px;overflow-y:hidden;cursor:hand;} 
  19. </style> 
  20. </head> 
  21.  
  22. <body> 
  23. <div>大家以后在以后运用时候可以扩展使用，更改为适合自己网页需求
    <a href="http://www.divcss5.com/">css</a>。</div> 
  24. <div id="nav"> 
  25. <ul> 
  26. <li class="menu2" onMouseOver="this.className='menu1'"
     onMouseOut="this.className='menu2'">div+css  
  27. <div class="list"> 
  28. <a href="http://www.divcss5.com/">DIV CSS</a><br /> 
  29. <a href="#">我的首页</a><br /> 
  30. <a href="#">我的日志</a><br /> 
  31. <a href="#">我的日志</a><br /> 
  32. <a href="#">我的相册</a><br /> 
  33. <a href="#">我的收藏</a><br /> 
  34. </div> 
  35. </li> 
  36. <li class="menu2" onMouseOver="this.className='menu1'"
     onMouseOut="this.className='menu2'"><a href="http://www.divcss5.com/html/">HTML入门</a> 
  37. <div class="list"> 
  38. <a href="http://www.divcss5.com/html/">HTML入门</a><br /> 
  39. <a href="http://www.divcss5.com/html/h5.html">html是什么</a><br /> 
  40. <a href="#">我的日志</a><br /> 
  41. <a href="#">我的相册</a><br /> 
  42. <a href="#">我的收藏</a><br /> 
  43. </div> 
  44. </li> 
  45. <li class="menu2" onMouseOver="this.className='menu1'"
     onMouseOut="this.className='menu2'"><a href="http://www.divcss5.com/rumen/">CSS入门</a>  
  46. <div class="list"> 
  47. <a href="http://www.divcss5.com/">DIVCSS5</a><br /> 
  48. <a href="#">我的相册</a><br /> 
  49. <a href="#">我的收藏</a><br /> 
  50. </div> 
  51. </li> 
  52. <li class="menu2" onMouseOver="this.className='menu1'" 
    onMouseOut="this.className='menu2'">
    <a href="http://www.divcss5.com/css-hack/">CSS HACK</a> 
  53. <div class="list"> 
  54. <a href="http://www.divcss5.com/">DIV+CSS</a><br /> 
  55. <a href="#">我的首页</a><br /> 
  56. <a href="#">我的日志</a><br /> 
  57. <a href="#">我的相册</a><br /> 
  58. <a href="#">我的收藏</a><br /> 
  59. </div> 
  60. </li> 
  61. </ul> 
  62. </div> 
  63. </body> 
  64. </html> 

CSS下拉菜单打包下载地址：

立即下载 （1.659KB）

下拉菜单演示地址：http://www.divcss5.com/fanli/下拉.html

分享到：
| CSS hack详解
评论
发表评论

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

相关推荐

    绝对实用的DIV+CSS+JQUERY模板

    在“绝对实用的DIV+CSS+JQUERY模板”中，jQuery可能被用来实现诸如下拉菜单、滑动效果、图片轮播、表单验证等各种动态功能，提升用户体验。 【DIV】：在HTML中，`&lt;div&gt;`是一个通用的容器标签，用于组合其他HTML元素...

    电子科技产品div+css全套企业网页模板

    例如，头部导航通常包含logo、菜单、搜索框等元素，使用CSS实现动态效果，如悬停变色、下拉菜单等，提升用户交互体验。 此外，模板还注重色彩搭配和图形设计，以体现电子科技产品的现代感和专业性。色彩选择上，...

    div+css布局的前台模板

    6. **JS目录**："js"文件夹通常包含JavaScript代码，用于实现页面的交互功能，如滚动动画、下拉菜单、弹窗提示、表单验证等。JavaScript可以与HTML和CSS紧密结合，增强用户体验，使网站更加生动和互动。 7. **响应...

    160个div+css模板

    这些模板覆盖了各种网页设计的需求，包括导航栏、头部、内容区域、侧边栏、页脚等常见部分，以及一些特殊的设计元素，如滑块、弹出窗口、下拉菜单等。 在这些模板中，你可以学习到如何使用Div（division）元素作为...

    花卉苗圃类DIV+CSS模板

    它可能包含表单元素，如文本框、下拉菜单和提交按钮，同样使用`div`和CSS进行布局和美化。 5. **images**：这个文件夹包含了网站所需的图像资源，比如花卉图片、图标和其他装饰性图像。图像在网页设计中起着至关...

    告密科技学校网站管理系统模板 DIV+CSS

    2. **模块化布局**：通过Div将网页内容划分为多个独立的模块，如头部、导航、主体、侧边栏和底部等，每个模块都有自己的CSS样式，便于内容管理和更新。 3. **样式分离**：CSS文件将样式与HTML内容分离，提高了代码...

    40个DIV+CSS网站模板

    例如，下拉菜单、滑动轮播图、模态对话框等。这些都是现代网页中常见的功能，通过结合HTML、CSS和JavaScript，可以实现更为丰富和动态的用户界面。 在实际应用中，你可以根据自己的项目需求，选择合适的模板作为...

    164精美网页模板（div+css）81-90

    8. "89"可能是一个带有交互元素的模板，比如滑块、下拉菜单和表单等，提升用户交互体验。 9. "88"可能是一个专门针对移动设备优化的模板，注重触摸操作和快速加载。 10. "82"可能是一个复杂布局的模板，适用于大型...

    40款网页模板源文件（DIV＋CSS）

    通过分析和研究这些模板的源代码，你可以学习到如何使用`div`和CSS创建常见的网页结构，如导航栏、轮播图、按钮、下拉菜单等组件，以及如何优化页面的可读性和用户体验。此外，还可以了解到当前前端开发的最新趋势和...

    164精美网页模板（div+css）121-130

    8. JavaScript和jQuery：虽然标题和描述中没有明确提及，但在实际网页模板中，可能会使用JavaScript和jQuery来增加交互性，如滑动效果、下拉菜单、弹出窗口、轮播图等动态功能。 9. SEO优化：这些模板可能考虑了...

    27款后台管理页面设计 DIV+CSS

    "27款后台管理页面设计 DIV+CSS"集合提供了一组精心设计的模板，旨在帮助开发者和设计师快速构建美观且实用的后台管理系统。 首先，我们来了解一下"DIV+CSS"这个概念。DIV（Division）是HTML中的一个标签，用于对...

    帝国CMS 非主流阁DIV+CSS模板

    6. **交互元素**：如滑动图片、下拉菜单、按钮效果等，增强用户互动性。 7. **SEO优化**：按照搜索引擎优化的最佳实践，设置元标签，提高网站在搜索结果中的排名。 8. **兼容性**：确保模板在多种浏览器上都能正常...

    27款后台管理页面设计 DIV+CSS.zip

    6. **自定义组件**：后台管理页面往往需要一些定制化的组件，如日历选择器、下拉菜单等。HTML5的新元素如、配合CSS可以轻松实现这些功能。 7. **性能优化**：为了确保后台管理页面的快速加载，开发者需关注CSS的...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    1.jquery+css美化select下拉菜单插件(Stylish Select v0.3)下载 2.jQuery+CSS实现多项选择文本框的插件下载 3.jQuery表单验证插件EasyValidator 2.0带TIP提示效果 4.jQuery导航插件下载之支持三级的Menu暖色...

    用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript

    - **导航栏**: 使用`&lt;nav&gt;`标签创建，结合CSS实现下拉菜单或侧边栏等功能。 - **轮播图**: 利用JavaScript控制图片的自动切换或手动切换。 - **详情页**: 展示景点详细介绍、地图位置、开放时间等内容。 - **地图...

    使用DIV+CSS技术设计的非遗文化网页与实现制作（web前端网页制作课.md

    3. **JavaScript 动画**：通过JavaScript可以实现更复杂的动画效果，例如轮播图、下拉菜单等。 4. **SEO优化**：为了提高网站的搜索引擎排名，可以考虑使用一些基本的SEO技术，比如合理设置标签、使用关键字等。 5. ...

    web前端期末大作业：HTML+CSS+JavaScript绿色的盆栽花店网站响应式模板 大学生鲜花网页设计

    - **下拉菜单**: 当鼠标悬停时显示隐藏的子菜单项。 - **表单验证**: 在用户提交表单之前进行必要的数据验证，提高用户体验。 ### 四、开发工具与环境 - **编辑器**: Dreamweaver、HBuilder、Vscode、Sublime Text...

    css+div网站后台管理模板15.rar

    3. **交互元素**：后台管理模板往往包含各种交互元素，如按钮、表单、下拉菜单等，这些元素的样式和行为可以通过CSS进行定制，增强用户体验。 4. **色彩与字体设计**：模板的配色方案和字体选择对于提升后台管理...

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