文档章节

纯css打造最简洁下拉菜单-无js-非常实用

柴高八斗之父
 柴高八斗之父
发布于 2016/11/22 17:46
字数 311
阅读 62
收藏 0

先上图:(点击图片可到楼主的个人网站)

 样式部分:

分全局,一级菜单和二级菜单。初始化二级的ul 的display 默认是隐藏的。

<style>
/*公共全局*/
*{ margin:0; padding:0;}
ul,li{ list-style:none;}
a{ color:#333; text-decoration:none;}

/*一级菜单*/
.nav ul li{ float:left; width:200px; background:#FC0; margin-right:1px; }  /*一级菜单宽度改过,下面二级自动继承*/
.nav ul li a{ width:100%; line-height:30px;  text-align:center; display:block}
.nav ul li a:hover{ background:#333; color:#fff;}
.nav ul li:hover ul{ display:block;  width:100%;}  //这句是关键

/*二级菜单*/
.nav ul li ul{ display:none; width:100%;}
.nav ul li ul li a{ float:left; width:100%; height:30px; line-height:30px;}
.nav ul li ul li a,.nav ul li ul li a:visited{}
.nav ul li ul li a:hover{ background:#333; color:#fff;}
</style>

 结构方面:

二级菜单UL是嵌套在一级的li中。通过样式的hover来实现让它display显示出来。

<div class="nav">
   <ul>
     <li><a href="#">首页</a></li>
     <li><a href="#">客户</a>
        <ul>
           <li><a href="#">11</a></li>
           <li><a href="#">22</a></li>
           <li><a href="#">33</a></li>
        </ul>
     </li>
     <li><a href="#">车辆</a>
         <ul>
           <li><a href="#">44</a></li>
           <li><a href="#">55</a></li>
           <li><a href="#">66</a></li>
        </ul>
     </li>
   </ul>
</div>

 

© 著作权归作者所有

柴高八斗之父
粉丝 4
博文 213
码字总数 118647
作品 0
宁波
前端工程师
私信 提问
最新的 Javascript 和 CSS 应用技巧荟萃

随着前端技术的发展,javascript和css在 网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过 的特效和动画,在今天...

gbin1
2012/07/10
4.6K
12
12 个开发人员的实用代码编辑器

Compilr Compilr 是一个在线的集成开发怀集(IDE),目前支持9种编程语言:C、C++、C#、Java、JavaScript、PHP、Python、Ruby 和 Visual Basic。 Compilr 由坐落于加拿大新斯科舍省的 Ninja ...

ChildhoodAndy
2012/12/28
798
1
9款风格华丽的jQuery/CSS3插件

今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧。 1、jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚,鼠标移到菜单...

yykj
2014/01/06
594
1
37个超级棒的 jQuery菜单插件

导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架,兼容 ...

墙头草
2012/03/22
18.6K
11
jQuery Grid插件 jQuery.bsgrid 1.32 发布,中文文档及更简单的示例

jQuery.bsgrid 简单轻量易扩展的jQuery Grid插件 简单易用的jQuery Grid插件,支持json、xml数据格式,自带多套皮肤且易于扩展,支持分页或不分页,对扩展性友好,导出友好。 本次更新,中文...

bs2004
2015/02/04
6.9K
27

没有更多内容

加载失败,请刷新页面

加载更多

idea修改新的git地址

我们在项目变动中通常会遇到更换git地址情况,这里介绍一个在idea项目中简单更换git地址操作: 1、点击VCS; 2、点击Git; 3、点击Remotes; 具体步骤如图 4、点击框中链接即可在右边看到一个...

west_coast
10分钟前
3
0
将规则集传递给mixin

允许包装在mixin中定义的css块。 分离的规则集是一组CSS属性、嵌套规则集、媒体声明或者是存储在变量中的任何其他内容,我们可以将它包含在规则集中或其他结构中,并且所有属性都将复制到那里...

凌兮洛
11分钟前
2
0
玩转阿里云 Terraform(一):Terraform 是什么

从本文起,我将陆续推出一系列有关 Terraform 的文章,从概念,特点,工作机制,用法以及最佳实践等多个方面由浅入深的向大家介绍如何在阿里云上玩转 Terraform。同时也希望借此机会,与感兴...

阿里云官方博客
12分钟前
3
0
科研大数据面临的挑战

近几十年硬件的发展非常迅猛,第一台Macintosh苹果电脑的内存是128KB(0.13MB),现在很多笔记本配的是8GB的内存,硬盘1TB(1024GB),2TB的很常见。大型的数据服务器上还会有更大的储容量,...

英论阁学术院
12分钟前
2
0
python学习10.09:Python列表和元组的底层实现

有关列表(list)和元组(tuple)的底层实现,本节分别从它们的源码来进行分析。 首先来分析 list 列表,它的具体结构如下所示: typedef struct { PyObject_VAR_HEAD /* Vector o...

太空堡垒185
13分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部