`
WXQ2000
  • 浏览: 28685 次
  • 性别: Icon_minigender_2
  • 来自: 南京
社区版块
存档分类
最新评论

一款简单的下拉菜单,纯css超级实用

阅读更多
简单的横向下拉menu!
一款简单的下拉菜单,纯css超级实用
#navigation{ width:800px; height:22px; line-height:22px; padding:6px; border:1px solid #0066CC; background:#0099CC;}
#navigation ul li{ display:block; float:left; position:relative; margin-right:15px;}
#navigation ul li a{ display:block; background:#FFFFFF; color:#000099; text-decoration:none; font-size:12px; font-weight:bold; padding:0px 5px;}
#navigation ul li a:hover{ background:none; color:#FFFFFF; text-decoration:underline;}
#navigation ul li ul{ display:none; position:absolute;}
#navigation ul li:hover ul{ display:block; width:80px; background:#FFFFFF; color:#009;}
#navigation ul li ul li{ display:block; background:#FF9900; color:#FFFFFF;width:80px; border-bottom:#CCCCCC 1px solid;}

<div id="navigation">
    <ul>
	<li><a href="#">首页</a></li>
	<li><a href="#">衬衫</a>
	   <ul id="aa;">
	      <li><a href="#">长袖</a></li>
		  <li><a href="#">短袖</a></li>
		  <li><a href="#">中袖</a></li>
	   </ul>
	</li>
	<li><a href="#">卫衣</a>
	    <ul>
	      <li><a href="#">套头</a></li>
		  <li><a href="#">开襟</a></li>
	   </ul>
	</li>
	<li><a href="#">裤子</a>
	    <ul>
	      <li><a href="#">长袖长袖</a></li>
		  <li><a href="#">短袖长袖</a></li>
		  <li><a href="#">中袖</a></li>
	   </ul>
	</li>
	<li><a href="#">联系我们</a></li>
	</ul>

</div>
分享到:
评论

相关推荐

    两款超级漂亮实用的CSS导航菜单

    本文将深入探讨两款超级漂亮且实用的CSS导航菜单的设计与实现,以及它们在提升用户体验中的重要性。 首先,我们要明白CSS(层叠样式表)在创建导航菜单中的作用。CSS是一种样式语言,用于定义HTML或XML(包括如SVG...

    纯CSS制作的下拉菜单,简单方便

    一款纯css制作的下拉菜单,没有js,ie6、ie7、ie8 火狐等浏览都兼容的,超级实用

    CSS菜单栏 超级强大

    通过改变`display`属性并使用相对和绝对定位,可以实现下拉菜单的显示与隐藏。 七、自定义形状与边框效果 CSS还可以用来创建各种形状的菜单栏,比如圆形、梯形、半圆形等。利用`border-radius`、`clip-path`或SVG...

    15个精选超级漂亮div+css菜单下载(不下后悔)

    这里的"15个精选超级漂亮div+css菜单下载(不下后悔)"是一个资源集合,提供了15款设计精美、功能实用的Div+CSS导航菜单,适合用于网站开发和设计中,提升用户体验。下面将详细讲解Div+CSS菜单的设计原理、重要性以及...

    HTML5+CSS3实现的超级可爱的鬼脸表情下拉菜单效果源码.zip

    在"HTML5+CSS3实现的超级可爱的鬼脸表情下拉菜单效果源码.zip"这个压缩包中,我们可以看到一个利用这两种技术实现的独特下拉菜单设计。 首先,HTML5是超文本标记语言的新版本,它引入了许多新的元素和API,以支持更...

    html css 两款超级漂亮实用的CSS导航栏

    通过以上步骤,我们可以创建一款既美观又实用的CSS导航栏。当然,设计可以更进一步,比如添加下拉菜单、图标等复杂功能。在实际应用中,开发者可以根据自己的需求和项目风格进行定制,不断优化用户体验。 在压缩包...

    div+css菜单

    这些实例可能包括多种菜单类型,例如水平菜单、垂直菜单、下拉菜单等,展示各种CSS技巧和效果,如过渡、动画、响应式布局等。通过查看和学习这些示例,你可以更直观地理解div+css菜单的实现过程,并能灵活应用到自己...

    漂亮三级菜单 导航菜单 菜单

    在IT行业中,构建一个美观且功能强大的导航菜单是网站或应用程序设计的重要部分。"漂亮三级菜单 导航菜单 菜单"这个标题暗示我们关注的是一个多级菜单系统,它可能具有良好的视觉吸引力和易用性,适用于组织复杂的...

    Dreamweaver CS6超级链接和Spry菜单综合实践3.pdf

    在网页设计领域,Dreamweaver CS6是一款广泛使用的集成开发环境,它提供了强大的网页制作工具,包括超级链接和Spry菜单等元素。本篇文档主要关注如何在Dreamweaver CS6中结合这两种功能来创建一个实用且美观的网页...

    渐变多级下拉导航.zip

    "渐变多级下拉导航"是一个专门针对这一需求的解决方案,它基于superfish库实现,为用户提供了一种优雅且功能丰富的下拉菜单体验。下面我们将详细探讨这个主题中的相关知识点。 首先,我们要理解什么是“超级鱼”...

    DreamWeaver中应用CSS样式表

    DreamWeaver 中应用 CSS 样式表可以实现许多实用的效果,例如去除超级链接的下划线、实现鼠标悬停变色等。在 DreamWeaver 中,用户可以通过编辑样式表来定义样式,并将其应用于网页中。 去除超级链接的下划线 -----...

    Html 菜单头部

    例如,用jQuery实现一个简单的下拉菜单: ```javascript $(document).ready(function() { $('.dropdown').hover(function() { $(this).children('.dropdown-menu').slideToggle('fast'); }); }); ``` 在HTML...

    Bootstrap超级实用的后台管理系统模板

    - UI组件:Bootstrap提供了诸如导航条、按钮、下拉菜单、表单、警告框、模态框等丰富的UI元素,这些都在模板中得到体现,方便开发者快速集成到项目中。 2. **响应式设计**: - 为了适应各种设备的屏幕大小,模板...

    2013超级漂亮后台UI 纯静态UI界面

    《2013超级漂亮后台UI 纯静态UI界面》是针对网页设计与开发领域的一款经典作品,尤其适用于后台管理系统的用户界面设计。这款UI界面以其独特且美观的风格,于2013年发布时引起了广泛的关注。其设计理念在于提供一个...

    mega-menu.github.com:超级菜单测试

    首先,超级菜单是一种特殊的网页下拉菜单,它不仅包含传统的链接选项,还能展示更多的内容,如子分类、图像、搜索框、导航区块等,以提供更直观的用户界面。这种菜单的设计目标是提高用户体验,减少用户寻找信息的...

    精心收藏超级帅气无敌首页导航

    描述中的“一款JQUERY插件制作出精美首页导航栏 超酷”进一步确认了我们将深入学习如何利用JQUERY这个JavaScript库来打造引人注目的导航效果。JQUERY简化了DOM操作,动画效果实现和事件处理,使得开发者能快速构建...

    5个超酷超实用的网页导航条

    对于有多个子页面的大型网站,下拉菜单能有效组织和展示导航层次。用户可以逐级探索,而不会感到混乱。设计时要注意层次清晰,避免过多层级,以保持易用性。 5. **动态效果**: 动态效果如渐变、过渡和动画可以...

    Dreamweaver小技巧之应用CSS样式表

    Dreamweaver是一款流行的网页设计软件,它提供了直观的界面来操作和编辑CSS样式。在本教程中,我们将探讨两个Dreamweaver中关于CSS样式的实用小技巧:去除超级链接的下划线以及创建可反复使用的外部CSS样式表。 ...

    basket:一个简单,简约CSS框架

    是的,另一个CSS框架。 超级简约。 哦,它带有内置的暗模式。 用法 执行 到目前为止已完全实施的事情: 版式 徽章 - ? 块引用 纽扣 卡-? 下拉菜单-? 清单 形式 桌子 格网 代码 实用工具 工具提示 ...

    superfish-library-for-drupal-v1.1

    首先,Superfish是一款流行的JavaScript插件,由Joel Robichaud开发,用于创建可扩展的、多级下拉菜单。它具有许多优点,如平滑的动画效果、对触摸设备的支持、无障碍性(accessibility)以及对浏览器的良好兼容性。...

Global site tag (gtag.js) - Google Analytics