纯css实现下拉菜单的效果

最新推荐文章于 2022-04-12 20:50:49 发布
转载 最新推荐文章于 2022-04-12 20:50:49 发布 · 270 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/ll-taj/p/5241973.html

本文提供了一个关于CSS下拉菜单的实例教程，包括样式定义、菜单结构和交互效果，适用于网页开发者学习和实践。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>CSS下拉菜单实例模块-www.divcss5.com</title>
<style>
body,ul,li{background-color:white;font-size:12px;font-family:Arial, Helvetica, sans-serif;margin:0px; padding:0px;}
a{ color:#000000; text-decoration:none;}
body{text-align:center; }

li{display:inline;list-style:none;list-style-position:outside;text-align:center;font-weight:bold; float:left;}
.list a:link{color:#336601;text-decoration:none;float:left;width:100px;padding:3px 5px 0px 5px;}
.list a:visited{color:#336601;text-decoration:none;float:left;padding:3px 5px 0px 5px;width:100px;}
.list a:hover{color:white;float:left;padding:3px 3px 0px 20px;width:88px;text-decoration:none;background-color:#539D26;}
.list a:active{color:white;float:left;padding:3px 3px 0px 20px;width:88px;text-decoration:none; background-color:#BD06B4;}
#nav{width:600px;height:30px; margin:0 auto;padding:0px 5px; text-align:center; clear:both;}
.list{line-height:20px;text-align:left;padding:4px;font-weight:normal;}
.menu1{width:120px;height:auto;margin:6px 4px 0px 0px;border:1px solid #9CDD75;background-color:#F1FBEC;color:#336601;padding:6px 0px 0px 0px;cursor:hand;overflow-y:hidden;filter:Alpha(opacity=70);-moz-opacity:0.7;}
.menu2{width:120px;height:18px;margin:6px 4px 0px 0px;background-color:#F5F5F5;color:#999999;border:1px solid #EEE8DD;padding:6px 0px 0px 0px;overflow-y:hidden;cursor:hand;}
</style>
</head>

<body>
<div id="nav">
<ul>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">div+css
<div class="list">
<a href="http://www.divcss5.com/">DIV CSS</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="http://www.divcss5.com/html/">HTML入门</a>
<div class="list">
<a href="http://www.divcss5.com/html/">HTML入门</a><br />
<a href="http://www.divcss5.com/html/h5.html">html是什么</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="http://www.divcss5.com/rumen/">CSS入门</a>
<div class="list">
<a href="http://www.divcss5.com/">DIVCSS5</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"><a href="http://www.divcss5.com/css-hack/">CSS HACK</a>
<div class="list">
<a href="http://www.divcss5.com/">DIV+CSS</a><br />
<a href="#">我的首页</a><br />
<a href="#">我的日志</a><br />
<a href="#">我的相册</a><br />
<a href="#">我的收藏</a><br />
</div>
</li>
</ul>
</div><br />
<br />
<br /><br />
<br />

<br />
<br />

</body>
</html>

转载于:https://www.cnblogs.com/ll-taj/p/5241973.html

纯CSS控制实现下拉菜单效果-核心代码.html
07-02
纯CSS控制实现的拉菜单效果，反复删改，只留下了核心代码，在最大程度上为需要的人留下了空间
下拉菜单效果的实现方法--纯css实现
岁寒松柏
08-14 447
下拉导航的效果，实现效果有很多种效果，在这里我们使用css不用javascript实现咱们的下拉菜单效果 html代码&lt;ul id="nav"&gt; &lt;li&gt;&lt;a href="guanyuwomen.html"&gt;传智播客&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href
一个用纯CSS实现的下拉菜单
weixin_30751947的博客
12-26 165
用CSS做下拉列表的特效，代码如下： <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> ...
下拉菜单（纯CSS完成）
weixin_34326558的博客
05-13 95
2019独角兽企业重金招聘Python工程师标准>>> ...
纯CSS实现下拉菜单的示例代码
01-19
本篇文章主要介绍了纯CSS实现下拉菜单的示例代码，分享给大家，具体如下： 将下拉菜单的ul高度设置为0，并且超出部分隐藏掉。 设置下拉菜单的高度添加过渡效果，高度为auto时过渡效果失效。 <style> ul{ ...
HTML+CSS实现简单下拉菜单效果
09-24
在本篇内容中，我们讲解的是如何使用HTML和CSS来实现一个简单的下拉菜单效果。这是一种常见的网页交互设计方式，使得用户在鼠标悬停（hover）在导航菜单项上时，可以展开一个子菜单，从而提供更为丰富的导航选项。...
纯CSS下拉菜单
橙色卡布奇诺
06-10 661
纯css下拉菜单，二级下拉，三级下拉一样可以做，简单修改可以编程自己的代码
关于纯css实现简单的下拉菜单
u010743173的专栏
05-07 559
ul,li,a{            margin:0;            padding:0;         }         .menu > li {             display: inline-block; /*只有块元素width和heigth属性才会起作用*/             width: 200px;             backgrou
5款漂亮的纯CSS下拉菜单
08-14
5款漂亮的纯CSS下拉菜单，欢迎下载使用。
HTML5+CSS3实现的自定义下拉框菜单效果源码
08-31
自定义下拉框取代了传统的Select样式，用不一样的风格来让select更加美观。这款CSS3下拉框具有3D立体的卡片折叠动画效果，非常酷。
精美漂亮的实用div+css模仿select下拉框控件
03-01
基于jq.模仿select动作。。 好看使用。很不错。欢迎大家给意见、
使用CSS实现下拉菜单的效果
weixin_34344403的博客
08-20 234
2019独角兽企业重金招聘Python工程师标准>>> ...
微信小程序CSS3动画下拉菜单
lyc2786161648的博客
02-13 730
转载至https://blog.youkuaiyun.com/zjw_python/article/details/80720427
css下拉菜单代码（用纯css实现下拉菜单）
web前端开发博客
04-11 6857
用纯css代码写一个css下拉菜单，二级菜单opacity默认是0，鼠标在一级菜单hover时opacity就是1，opacity从0到1有一个transition过渡时间1秒钟，就实现了css下拉菜单动画缓慢出现效果，具体看下面例子代码。 css下拉菜单代码： <style> ul { list-style: none; margin: 0; padding: 0; } ul li a { display: block; text-decorat.
css实现下拉菜单
ybh756784818的博客
04-12 9300
css实现下拉菜单的具体步骤，前端小白的个人理解
纯css实现下拉菜单(超详细)
热门推荐
qq_28919991的博客
09-26 4万+
纯css写下拉菜单(超详细) ps：博主第一次发文章，不足之处还请指出 话不多说，直接进入正题吧 用ul 和 li标签写一个关联结构(ul 和 li的父子关系浑然天成，一般的关联结构都用它们) &amp;amp;lt;ul class=&amp;quot;nav&amp;quot;&amp;amp;gt; &amp;amp;lt;a href=&amp;quot;#&amp;quot;&amp;amp;gt;服装&amp;a
纯CSS实现导航栏菜单下拉效果
fengxue_snow的博客
07-31 5601
1、效果图 2、代码 <style> /*common css begin*/ *{margin:0px;padding:0px;} body{font-family: 微软雅黑,Microsoft yahei,Arial,Verdana,Tahoma,sans-serif; font-size: 12px;} a { color: #666; text-de...
掌握纯CSS实现下拉菜单的技巧
纯CSS下拉菜单实现的核心在于CSS伪类选择器 `:hover` 的使用。通过定义不同层级菜单的默认隐藏状态，并在父菜单项被悬停时显示子菜单项，从而实现下拉效果。 #### 知识点二.1：菜单显示样式 首先，我们需要定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值