CSS3实现的炫酷菜单代码分享
136 浏览量
2020-12-13
09:57:34
上传
评论
收藏 27KB PDF 举报
CSS3实现的炫酷菜单代码分享实现的炫酷菜单代码分享
index.html
复制代码代码如下:
<ul class=”menu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#s1″>Menu 1</a>
<ul class=”submenu”>
<li><a href=”#”>Submenu a</a></li>
<li><a href=”#”>Submenu b</a></li>
<li><a href=”#”>Submenu c</a></li>
<li><a href=”#”>Submenu d</a></li>
<li><a href=”#”>Submenu e</a></li>
<li><a href=”#”>Submenu f</a></li>
<li><a href=”#”>Submenu g</a></li>
<li><a href=”#”>Submenu h</a></li>
</ul>
</li>
<li class=”active”><a href=”#s2″>Menu 2</a>
<ul class=”submenu”>
<li><a href=”#”>Submenu a</a></li>
<li><a href=”#”>Submenu b</a></li>
<li><a href=”#”>Submenu c</a></li>
<li><a href=”#”>Submenu d</a></li>
<li><a href=”#”>Submenu e</a></li>
<li><a href=”#”>Submenu f</a></li>
<li><a href=”#”>Submenu g</a></li>
<li><a href=”#”>Submenu h</a></li>
</ul>
</li>
<li><a href=”#”>Menu 3</a>
<ul class=”submenu”>
<li><a href=”#”>Submenu a</a></li>
<li><a href=”#”>Submenu b</a></li>
<li><a href=”#”>Submenu c</a></li>
<li><a href=”#”>Submenu d</a></li>
<li><a href=”#”>Submenu e</a></li>
<li><a href=”#”>Submenu f</a></li>
<li><a href=”#”>Submenu g</a></li>
<li><a href=”#”>Submenu h</a></li>
</ul>
</li>
<li><a href=”#”>Menu 4</a></li>
<li><a href=”#”>Menu 5</a></li>
</ul>
2. CSS
复制代码代码如下:
.menu, .menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu {
height: 58px;
}
.menu li {
background: -moz-linear-gradient(#292929, #252525);
background: -ms-linear-gradient(#292929, #252525);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
background: -webkit-linear-gradient(#292929, #252525);
background: -o-linear-gradient(#292929, #252525);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#292929′, endColorstr=’#252525′);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#292929′, endColorstr=’#252525′)”;
background: linear-gradient(#292929, #252525);
资源评论
weixin_38720009
- 粉丝: 4
- 资源: 867
最新资源
- mfa_2024_06_17_09_58_35
- 计算机基础知识：计算机网络、操作系统、数据库、数据结构与算法、计算机组成原理、软件工程、设计模式、开发常用工具
- Visual C++ 6.0.lnk
- kali Linux操作系统高级测试实验
- SSM3K318T-VB一款N-Channel沟道SOT23的MOSFET晶体管参数介绍与应用说明
- 仓库管理系统数据库课程设计+源码+高分项目.7z
- SSM3K315T-VB一款N-Channel沟道SOT23的MOSFET晶体管参数介绍与应用说明
- c#ManagedDataAccess托管连接oracle
- SSM3K310T-VB一款N-Channel沟道SOT23的MOSFET晶体管参数介绍与应用说明
- Quectel-ECx00E-CN&ECx00Z-CN-MQTT-应用指导-AT指令集V1.1
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
