二级的CSS下拉菜单代码，鼠标移过显示子菜单_最火下载站
您的位置： >
> 二级的CSS下拉菜单代码，鼠标移过显示子菜单
二级的CSS下拉菜单代码，鼠标移过显示子菜单
　　基于CSS的二级下拉菜单代码，当鼠标划过的时候，子菜单会出现，没有过多修饰，简约不失美观，稍加修善就是一款好菜单。在兼容性方面，本菜单也做的不错。
　　在线演示：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&title&二级的CSS菜单，鼠标移过显示子菜单 Liehuo.Net&/title&
#nav, #nav ul {
padding: 0;
margin: 0;
list-style:
border: 1px solid #B0C4DE;
background-color: #E7EDF5;
color: #2D486C;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-
margin-right: 1
#nav a:link, #nav a:visited {
text-decoration:
padding-left: 1
color: #2D486C;
padding-top: 0.5
#nav ul li {
border-bottom: 1px solid #E7EDF5;
background-color: #F1F5F9;
font-size: 100%;
margin: 0;
margin-bottom: 0.5
padding: 0;
#nav li:hover ul {
&ul id=&nav&&
&li&&a href=&#&&Starters&/a&
&li&&a href=&#&&Fish&/a&&/li&
&li&&a href=&#&&Fruit&/a&&/li&
&li&&a href=&#&&Soups&/a&&/li&
&li&&a href=&#&&Main courses&/a&
&li&&a href=&#&&Meat&/a&&/li&
&li&&a href=&#&&Fish&/a&&/li&
&li&&a href=&#&&Vegetarian&/a&&/li&
&li&&a href=&#&&Desserts&/a&
&li&&a href=&#&&Fruit&/a&&/li&
&li&&a href=&#&&Puddings&/a&&/li&
&li&&a href=&#&&Ice Creams&/a&&/li&
&/html&&br /&&center&如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：&a href='/' target='_blank'&/&/a&&/center&提示：可修改后代码再运行!
上一篇： 下一篇：纯CSS实现鼠标滑过显示子菜单的二级菜单效果
作者：佚名
字体：[ ] 来源：互联网 时间：09-14 16:00:26
这篇文章主要为大家介绍了纯CSS实现鼠标滑过显示子菜单的二级菜单效果,通过简单的css针对hover设置实现鼠标滑过显示二级菜单的功能,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了纯CSS实现鼠标滑过显示子菜单的二级菜单效果。分享给大家供大家参考。具体如下：
这是一款基于纯CSS实现的菜单，当鼠标划过的时候，子菜单会出现，没有过多修饰，简约不失美观，稍加修善就是一款好菜单。在兼容性方面，本菜单也做的不错。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
代码如下:&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&&html xmlns="http://www.w3.org/1999/xhtml"&&head&&title&CSS Flyout menus&/title&&style&#nav, #nav ul {
padding: 0;
margin: 0;
list-style:}#nav li {
border: 1px solid #B0C4DE;
background-color: #E7EDF5;
color: #2D486C;
font: 80% Verdana, Geneva, Arial, Helvetica, sans-
margin-right: 1}#nav a:link, #nav a:visited {
text-decoration:
padding-left: 1
color: #2D486C;}#nav ul {
padding-top: 0.5}#nav ul li {
border-bottom: 1px solid #E7EDF5;
background-color: #F1F5F9;
font-size: 100%;
margin: 0;
margin-bottom: 0.5
padding: 0;}#nav li:hover ul {
display:}&/style&&/head&&body&&ul id="nav"&
&li&&a href="#"&Starters&/a&
&li&&a href="#"&Fish&/a&&/li&
&li&&a href="#"&Fruit&/a&&/li&
&li&&a href="#"&Soups&/a&&/li&
&li&&a href="#"&Main courses&/a&
&li&&a href="#"&Meat&/a&&/li&
&li&&a href="#"&Fish&/a&&/li&
&li&&a href="#"&Vegetarian&/a&&/li&
&li&&a href="#"&Desserts&/a&
&li&&a href="#"&Fruit&/a&&/li&
&li&&a href="#"&Puddings&/a&&/li&
&li&&a href="#"&Ice Creams&/a&&/li&
&/li&&/ul&&/body&&/html&
希望本文所述对大家的css网页设计有所帮助。
大家感兴趣的内容
12345678910
最近更新的内容织梦模板建站、织梦仿站，推荐选跟版网(专业织梦模板定制下载站)，您可以把织梦模板网：
亲，跟版网是专业的DEDECMS模板下载和定制开发服务商！您可以选择或者
css实现鼠标滑过显示子栏目下拉菜单的代码实例
& &以下内容您可能感兴趣： &
下文是纯css实现的，鼠标滑过自动显示子栏目下拉菜单的效果实例。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&genban.org&/title&
&style type=&text/css& &
list-style:url(1.jpg);
a:link,a:visited
text-decoration:
color:#000000;
.menu ul li{
list-style:
font-size:14
text-align:
background:#999999;
.menu ul li ul{
.menu ul li:hover ul{
position: left: 0 top: 21
.menu a:link{
background:url(2.png) -137px -10
.menu a:hover{
background:url(2.png) -26px -10
&p&genban.org导航&/p&
&div class=&menu&&
&li&&a href=&#&&首页&/a&&/li&
&li&&a href=&#&&新闻中心&/a&
&li&&a href=&1#&&新手入门&/a&&/li&
&li&&a href=&2#&&视频教程&/a&&/li&
&li&&a href=&3#&&常见问题&/a&&/li&
&li&&a href=&#&&学习课程&/a&
&li&&a href=&1#&&新手入门&/a&&/li&
&li&&a href=&2#&&视频教程&/a&&/li&
&li&&a href=&3#&&常见问题&/a&&/li&
&li&&a href=&#&&联系我们&/a&&/li&
鼠标滑过显示的关键css，其实就是
.menu ul li:hover ul{
position: left: 0 top: 21
通过li:hover状态，来更改display，从none改为block，从而达到显示的目的。
跟版网-专业织梦模板下载平台，转载请注明出处：
& &精心为您推荐： &
& &邀您关注： &
扫描左侧二维码即可在手机端访问此页面
扫描左侧二维码即可关注跟版网官方微信公众号，获取金币模板，还可以免费仿站哦！
扫描左侧二维码即可加入跟版网官方群，免费获取金币资源并可以与其他织梦高手共同交流学习
跟版网率先实现织梦的三网合一网站，从即日起（）日，跟版网会陆续免费分享一批金币资源给需要的朋友，关注本站认证官方微信公众账号并回复相应的提取码，系统会自动将下载地址发送给您，同时这些金币资源也会分享在官方的QQ群中，欢迎各位朋友踊跃加入。另外本站后期会每周选择大家比较喜欢的网站仿制，并免费分享给大家，还有免费送金币活动哦！
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
- dede源码分享
售价:40金币
- dede源码分享
售价:0金币
- dede源码分享
售价:20金币
- dede源码分享
售价:20金币
- dede源码分享
售价:0金币
& & & 跟版网竭力打造中国最大的织梦源码和织梦模板商城，我们有一批经验丰富的设计师和程序员，发展五年，跟版网拥有丰富的织梦模板，欢迎您的咨询，我们将竭诚为您提供最优质的服务。
& & & 跟版网织梦源码商城坚持“创意+品质+服务”的高端理念，运用创意设计的理念为您塑造高品质的网络品牌形象。凭借五年的探索和实践，跟版网织梦源码商城拥有一支经验丰富、技术精湛、尽职尽责的网络服务团队。精品网站建设，从跟版网织梦源码商城建站开始。
& & & 跟版网织梦源码和模板可分为两种形式获得，一种是官方源码，另外一种是会员共享源码。两种源码都分为免费和收费两种形式。
& & & 跟版网官方收费源码可通过支付费用获得，具体操作流程可查看网址：。会员共享源码可通过共享模板获取金币下载。如觉得麻烦，可以联系客服QQ：进行金币充值，充值后可随意下载。js+css移动鼠标显示二级下拉菜单
下载资源()次
阅读次数()次
发布时间：
用法简介：
js+css移动鼠标显示二级下拉菜单
相关标签：
网友评论：
一、不得利用本站危害国家安全、泄露国家秘密，不得侵犯国家社会集体的和公民的合法权益，不得利用本站制作、复制和传播不法有害信息！
二、互相尊重，对自己的言论和行为负责。
什么是邮箱订阅？
邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式，用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮，当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。}