css3实现的精美菜单
下拉菜单是我们做前端经常遇到的一些案例，今天学习了一下一个博客做的案例，例子如下：
源代码下载地址
css部分代码
<style type="text/css">
ul {
font-family:Arial, Helvetica, sans-serif;
background:#ccc;
background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#e9e9e9));
background:-moz-linear-gradient(top, #fff, #e9e9e9);
display:block;
clear:left;
float:left;
padding:0 15px;
margin:0 0 10px 0;
-webkit-box-shadow:0 0 2px #333;
-moz-box-shadow:0 0 2px #333;
box-shadow:0 0 2px #333;
border:1px solid #fff;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
ul li {
margin:0;
float:left;
display:block;
list-style:none;
}
ul li a {
padding:10px;
display:block;
color:#666;
text-decoration:none;
text-shadow:1px 1px 1px #fff;
}
ul li a:hover {
color:#000;
}
ul li ul {
margin:0 0 0 -15px;
display:none;
-webkit-border-top-right-radius:0;
-webkit-border-top-left-radius:0;
-moz-border-topleft-radius:0;
-moz-border-topright-radius:0;
border-top-left-radius:0;
border-top-right-radius:0;
}
ul li:hover ul {
display: block;
position: absolute;
}
ul li ul li {
clear: left;
}
.red, .red li ul {
background: #e01111;
background: -webkit-gradient(linear, left top, left bottom, from(#e01111), to(#901d1d));
background: -moz-linear-gradient(top, #e01111, #901d1d);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e01111', endColorstr='#901d1d');
}
.red a {
color: #fff;
text-shadow: 0 -1px 1px #770d0d;
}
.red a:hover {
color: #fff;
}
</style>
html代码
<ul class="red">
<li><a href="#">Nav Item</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Nav Item</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
<li><a href="#">Nav Item</a>
<ul>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
<li><a href="#">Sub Item</a></li>
</ul>
</li>
</ul>
预览效果如下：
css3实现的精美菜单相关推荐
- 基于CSS3飘带状3D菜单 菜单带小图标
这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状 ...
- css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
- html5导航菜单置顶,jQuery和css3顶部固定导航菜单特效插件
这是一款非常实用的jQuery和css3顶部固定导航菜单特效插件.我们曾经在很多网站上都看到过这种顶部固定导航菜单特效.Disqus For Websites的导航菜单就是一个很好的例子. HTML结 ...
- html div初始隐藏点击可见_3种CSS3移动手机隐藏菜单UI界面代码解析/附源码下载...
这是一款效果非常酷的jQuery和CSS3移动手机隐藏菜单UI界面设计.这个UI设计共有三种不同的打开隐藏菜单的效果,分别为滑动显示,Material Design风格效果和展开式效果. 使用方法 H ...
- CSS3实现扇形动画菜单特效
CSS3实现扇形动画菜单特效 CSS3实现扇形动画菜单特效 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html><head><me ...
- html中怎么做扇形菜单,CSS3实现扇形动画菜单流程详解
这次给大家带来CSS3实现扇形动画菜单流程详解,CSS3实现扇形动画菜单的注意事项有哪些,下面就是实战案例,一起来看一下. 原文章请点击这里 简化版完整实例 CSS3扇形动画菜单 *{padding: ...
- 使用 CSS3 创建下拉菜单
当我在为 WordPress 编写 Notepad 主题 时,顺道学习了一些新的 CSS3 特性,现在此分享.查看演示可以看到一款类似 Mac 风格的多级下拉菜单,使用 border-radius,b ...
- 使用CSS3动画制作导航菜单
使用CSS3动画制作导航菜单 1.使用定位属性把图片"赚"和"花"设置到相对应的位置上 2.使用animation属性给中间的"赚"和&qu ...
- CSS3手机端侧滑菜单 4种滑动菜单特效
详细内容请点击 这是一款基于CSS3的手机端侧滑菜单,一共有4种侧滑动画特效.这款CSS3菜单的特点是鼠标划过时即可以各种动画方式展开和隐藏菜单项,该动画方式由CSS3中的transition-del ...
最新文章
- python表格筛选打印_按行名进行表格筛选：awkpythonR
- struts文件上传，获取文件名和文件类型
- sprint冲刺计划第三天团队任务
- 常见的 Error 和 Exception
- 一个volatile跟面试官扯了半个小时
- 大神交流经验！浙大吴飞与贾扬清经典十问！
- 你可能不知道的Chrome-devtools用法总结
- php multicast多播实现详解
- Reporting Service RDLC 数据换行解决方案
- 谷歌地球 最新hosts_给我一个Google地球app，可以领略全球3D风情
- 2019主流的前端框架
- 解决vue页面四周有白边的问题
- 量子计算机 液体核磁共振,用液体核磁共振实现量子计算
- 解决yum安装gcc报错：Error: Package: glibc-headers-2.17-317.el7.x86_64
- 电大2019秋c语言程序设计,中央电大秋C语言程序设计A试题
- UNI-APP_uni-ap自动获取状态栏高度，自定义导航栏组件
- 滑坡的剖面图怎么用计算机绘制,利用AutoCAD绘制地质图的若干方法
- 通过倾斜摄影快速建立高精度三维可视化场景
- 基于SpringBoot+Vue在线考试系统【web端+小程序端】【附带源码】
- Sql Server 数据类型