下拉菜单——css方式实现二级菜单

最新推荐文章于 2024-05-27 17:27:19 发布
最新推荐文章于 2024-05-27 17:27:19 发布
阅读量4.3k 收藏 11
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sndongcheng/article/details/73087451
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	    <style>
            /*静态页面样式设置开始*/
            /*一级菜单样式设置开始*/
            *{margin:0px;padding:0px;}
            #nav{background-color:#eee;width:600px;height:40px;margin:0 auto;}
            #nav ul{list-style:none;}
            #nav ul li{float:left;line-height:40px;text-align:center;}
            /*
                text-decoration:nono;————实现了<a>标签的默认样式为零
                text-align:center;实现了<a>标签的样式文字居中
                display:block;————一定一定一定要设置，因为只有把<a>标签的display属性设置为block，才能对<a>标签进行样式的设置

            */
            #nav a{text-decoration: none;display: block;padding:0 10px;color: #000;} 
            #nav a:hover{color: #ccc;background-color: #ddd;}
            /*一级菜单样式设置结束*/

            /*二级菜单设置样式开始*/
                /*
                    肯定肯定肯定要设置ul li ul的position属性值为absolute,这样一级菜单的宽度将二级菜单的不受影响
                    ul li ul li{margin-top设置值导致的问题是，当鼠标滑到二级菜单下面时会退出二级菜单,所以应该用border-top来代替}
                */
               #nav ul li ul li{float: none;background-color: #eee;margin-top: 0px;border-top: 2px solid #fff;}
               #nav ul li{position: relative;}
               #nav ul li ul{position: absolute;left: -145px;height: 40px;}
               #nav ul li ul li a:hover{background-color: #ddd;}
            /*二级菜单设置样式结束*/
            /*静态页面设置样式结束*/
            /*CSS方法实现二级菜单的显示和隐藏开始*/
            #nav ul li ul{display: none;}
            #nav ul li:hover ul{display: block;}
            /*CSS方法实现二级菜单的显示和隐藏结束*/
            /*浏览器兼容性测试开始*/
            #nav a{height: 40px;}
            #nav ul li ul li a{width: 500px;}
            /*浏览器兼容性测试结束*/
        </style>  
</head>
<body>
	<div id="nav">  
    <ul>  
    	<li><a href="#">菜单1</a>
            <ul>
                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>
                <li><a href="#">3级</a></li>
                <li><a href="#">4级</a></li>
            </ul>
        </li>
    	<li><a href="#">菜单2</a>    
            <ul>
                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>
                <li><a href="#">3级</a></li>
                <li><a href="#">4级</a></li>
            </ul>
        </li>
    	<li><a href="#">菜单3</a>
            <ul>
                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>
                <li><a href="#">3级</a></li>
                <li><a href="#">4级</a></li>
            </ul>
        </li>
    	<li><a href="#">菜单4</a>
            <ul>
                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>
                <li><a href="#">3级</a></li>
                <li><a href="#">4级</a></li>
            </ul>
        </li>
    	<li><a href="#">菜单5</a>
            <ul>
                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>
                <li><a href="#">3级</a></li>
                <li><a href="#">4级</a></li>
            </ul>
        </li>
    	<li><a href="#">菜单6</a>
            <ul>
                <li><a href="#">2级fdjkgnfweifgdcsdjhwouhfioewjoivoiew</a></li>
                <li><a href="#">3级</a></li>
                <li><a href="#">4级</a></li>
            </ul>
        </li>
	</ul>
	<div>  
</body>
</html>


csdndc
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单实现CSS导航栏二级菜单从上往下平滑滑下弹出效果
vvv3171071的博客
10-27 5136
页面样式如下： html： <li> <div class="nav-tab">技术分析</div> <ul class="nav-menu"> <li>音视频</li> <li>语言</li> <li>Firebase</li> <li>Google AAB</li> <li>百度</li> </ul&gt
Css实现鼠标滑过，一二级菜单显隐问题
weixin_44912745的博客
03-13 1101
Css实现鼠标滑过，一二级菜单显隐问题
【html+css（大作业）】二级菜单导航栏
最新发布
2301_79982543的博客
05-27 1198
hello，hello好久不见！
纯CSS实现鼠标滑过显示子菜单的二级菜单效果
wuling129的专栏
11-23 1555
<!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, .
避坑：css二级菜单的隐藏与显示问题
前端你鹏哥的博客
06-26 832
我们想要的效果是鼠标移入首页菜单的时候显示下方二级菜单，并且可以选中下方二级带单，但是由于层级问题，导致我们只要鼠标移到首页之外的区域二级菜单就会隐藏。由于层级问题导致css设置的二级菜单的显示在移出菜单后二级菜单又隐藏了。解决办法就是使用z-index属性设置二级菜单的层级样式。
纯CSS实现二级导航下拉菜单--css的简单应用
zhaiyq的博客
08-07 1万+
思想：使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级导航菜单的li标签时，显示二级导航菜单的ul标签。由于实现起来比较简单，所以在这里直接给出了参考代码。 1、纯CSS二级导航下拉菜单代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8" c...
蓝色下拉滑动二级导航菜单.zip
07-11
3. CSS3实现下拉菜单： - 选择器：通过CSS3的类选择器、伪类选择器（如`:hover`）来控制不同状态下的菜单样式和行为。 - 布局：使用`display`属性（如`block`、`inline-block`或`flexbox`）来设置菜单项的排列方式...
css3实现的鼠标悬浮3D转动二级下拉导航菜单动画特效源码.zip
11-02
在这种情况下，可能使用了Flexbox来定位一级和二级菜单项，并确保它们在不同屏幕尺寸下的响应式布局。 6. **媒体查询**：利用`@media`规则，我们可以根据设备的屏幕尺寸或方向应用不同的样式。对于响应式设计，这至...
jquery带下拉菜单和焦点图代码分享
11-23
jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码。感兴趣的朋友快来学习学习吧 运行效果图： ———————-查看效果 下载源码———————– 小提示：浏览器中如果不能正常运行，...
蓝色下拉滑动二级导航菜单特效代码
03-20
这个特效使得二级菜单在鼠标悬停时以平滑的动画效果下拉显示，不仅美观，而且符合用户的直觉操作。 首先，我们来详细了解一下这个特效的核心技术——CSS3。CSS3是层叠样式表的最新版本，相比CSS2，它提供了更多先进...
超简洁CSS抽屉式下拉菜单代码，无JS哦，加载速度快
05-19
本主题聚焦于一个特别的实现方式——“超简洁CSS抽屉式下拉菜单”，它的一大亮点在于无需JavaScript（JS），仅依赖CSS来实现，这使得页面加载速度更快，提升了用户访问效率。 CSS（层叠样式表）是网页设计的核心...
css多级下拉菜单
05-23
很好看的多级下拉菜单
div+css 纵向导航菜单及二级菜单弹出
janefir的专栏
11-26 6717
1） 纵向导航菜单 body { font-family: Verdana;font-size: 12px; line-height: 1.5; } a { color: #000;text-decoration: none; } a:hover { color: #F00; } #menu { width: 100px; border:1px solid #CCC; } #menu
CSS 实现鼠标悬停上弹出二级菜单动画显示（二）
分享我的点点滴滴，在成长路上与你同行！
09-08 1470
效果： HMTL页面： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 去掉小黑点 */ ul{ list-style: none; } /* 隐藏 */ ul>li ul{ display: none.
html实现二级菜单自动打开,纯CSS实现鼠标滑过显示子菜单的二级菜单效果
weixin_34824634的博客
05-31 1097
本文实例讲述了纯CSS实现鼠标滑过显示子菜单的二级菜单效果。分享给大家供大家参考。具体如下：这是一款基于纯CSS实现的菜单，当鼠标划过的时候，子菜单会出现，没有过多修饰，简约不失美观，稍加修善就是一款好菜单。在兼容性方面，本菜单也做的不错。运行效果截图如下：在线演示地址如下：具体代码如下：复制代码代码如下:/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-...
鼠标滑过，二级菜单显示
xqiitan的专栏
04-02 3442
使用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"> &l...
在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
热门推荐
杨明金的博客
11-16 22万+
查看本章节 查看作业目录 需求说明： 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到“最新动态页”或“帮助查询”菜单上时，其二级菜单滑入显示 当鼠标从“最新动态页”或“帮助查询”菜单上移出时，其二级菜单滑出隐藏 实现思路： 新建 HTML 页面，在页面上使用无序列表显示一级菜单 在“最新动态页”和“帮助查询”菜单中加入二级菜单，二级菜单默认状态为隐藏 当鼠标悬浮在一级菜单上时，菜单的背景色变为红色，字体颜色变为白色 为一级菜单的鼠标
html+css 实现导航栏二级菜单——气泡框
m0_55879104的博客
06-07 2331
HTML+CSS 实现二级菜单气泡框
jQuery二级菜单滑入滑出效果
yinghanhanhan的博客
12-15 395
使用jQuery滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏。
css二级导航栏下拉菜单
06-09
好的，你可以按照以下步骤实现CSS二级导航栏下拉菜单： 1. 在HTML文件中，用列表实现导航栏，子列表实现下拉菜单，如下所示： ```html <li><a href="#">首页</a></li> 产品 <li><a href="#">产品1</a></li...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值