最简洁的纯CSS菜单，二级下拉导航

最新推荐文章于 2023-04-03 21:43:45 发布
最新推荐文章于 2023-04-03 21:43:45 发布
阅读量2.4k 收藏 1
点赞数
文章标签： css ie xhtml 数据库 border 相册

<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />  
<title>纯CSS菜单</title>  
<style type="text/css">
* {font-family:"宋体";margin:0;padding:0;}
body {padding:15px;}
.nav li li a {display:inline-block;}
.nav li li a {display:block;}
.nav ul {list-style-type:none;margin:0;padding:0;}
.nav ul li { float:left;line-height:24px;display:block;border-bottom:dashed #ccc 1px;font-size:0;padding:0;margin:0;width:120px;}
.nav ul li a {display:block;width:120px;height:24px;font-size:12px;text-align:center;color:#555;text-decoration:none;background:#f7f7f7;}
.nav ul table {width:100%;border-collapse:collapse;border:0;padding:0;margin:0;}
.nav ul li ul {display:none;}
.nav ul li:hover,.nav ul li a:hover,.nav ul li a:active {color:red;background-color:#f1f1f1;}
.nav ul li:hover ul,.nav ul li a:hover ul,.nav ul li a:active ul {display:block;width:100%;}
.nav ul ul li {display:block;width:100%;border:none;}
.nav ul ul li a{display:block;color:blue;border:none;}
</style>  
</head>  

<body>  
<div class="nav">
<ul>
<li><a href="#">首页
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">最新更新</a></li>
<li><a href="#">下载排行</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#">ASP
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">企业整站</a></li>
<li><a href="#">图片相册</a></li>
<li><a href="#">社区程序</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#">PHP
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">博客微博</a></li>
<li><a href="#">论坛社区</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#">JSP
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">企业</a></li>
<li><a href="#">新闻系统</a></li>
<li><a href="#">留言</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#">VC++
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">数据库</a></li>
<li><a href="#">界面</a></li>
<li><a href="#">加密</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="#">DELPHI
<!--[if IE 7]><!--></a><!--<![endif]--><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a href="#">系统相关</a></li>
<li><a href="#">算法</a></li>
<li><a href="#">数据库</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
</body>  
</html>


零度空间0520
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
delphi导航菜单范例
04-13
一个简单的delphi导航菜单，赶快下载吧！
纯CSS制作二级导航下拉列表
04-30
至此，一个基本的纯CSS二级导航下拉列表就完成了。你可以根据自己的需求调整颜色、大小、过渡效果等样式。这个方法的好处是代码简洁，易于理解和维护，同时也兼容各种现代浏览器。 需要注意的是，虽然这种方法在...
html二级菜单:DIV+CSS制作二级菜单（横排二级下拉菜单）以及二级菜单出现错位怎么解决
LL__Sunny的博客
12-15 1万+
DIV+CSS制作二级菜单（横排二级下拉菜单）以及二级菜单出现错位解决方法
css实现简单下拉二级导航栏
happyxiaoxinxin的博客
04-03 425
【代码】css实现简单下拉二级导航栏。
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
热门推荐
王佳斌
10-12 2万+
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单），HTML css3菜单鼠标移入显示下方二级菜单，用纯CSS实现鼠标经过后出现下拉菜单，css实现网页中鼠标移入出现下拉框，用纯CSS实现鼠标经过后出现下拉菜单，鼠标移动下拉菜单(下拉菜单之纯CSS实现方法) 鼠标悬停显示下拉菜单，html鼠标悬停下拉列表，CSS实现鼠标悬停出现下拉菜单及二级菜单。CSS 下拉菜单 | 菜鸟教程，官方教程。hover菜单时显示隐藏的div盒子，里面有二级菜单。
Delphi菜单设计.4
jandroid
10-16 214
4.菜单栏、工具栏和状态栏 在可视化程序设计中，每个应用程序都包含一个主窗体。主窗体并不仅仅是一个Form窗体，一个完整的应用程序窗体除了Form窗体外，还应包括菜单栏、工具栏和状态栏等相关组件。这三种组件是主程序窗体的重要组成部分，通过这些组件，可以方便地完成各项操作并了解当前程序的运行状态。本章将介绍如何创建菜单栏、工具栏、状态栏。 4.1 菜单栏 通常，菜单可以看作是命令的列表，使...
纯CSS实现二级导航下拉菜单
05-06
以上就是使用纯CSS实现二级导航下拉菜单的基本步骤。通过调整CSS属性，你可以自定义菜单的样式、动画效果以及交互行为，以适应不同网站的设计需求。记住，良好的导航设计应简洁易用，同时保持与网站整体风格的一致性...
企业简洁风格二级下拉导航菜单
01-23
在构建企业网站时，一个清晰、简洁且高效的二级下拉导航菜单是至关重要的。这种设计不仅提升了用户体验，也使得网站的结构更为直观。"企业简洁风格二级下拉导航菜单"通常指的是采用专业、干净的设计元素，使用户能够...
纯CSS二级下拉导航菜单
06-04
【纯CSS二级下拉导航菜单】是一种常见的网页设计技术，主要应用于网站的顶部导航，以提供多级菜单功能。在不依赖JavaScript的情况下，通过CSS（层叠样式表）的特性，我们可以实现优雅的交互效果，使得用户能方便地...
jquery实现二级导航下拉菜单效果
10-23
在网页设计中，二级导航下拉菜单是一种常见的交互元素，它能有效组织大量链接并节省空间。本教程将详细介绍如何使用jQuery实现二级导航下拉菜单的效果。 首先，我们需要准备HTML结构。一个基本的二级导航菜单通常...
DIV+CSS 二级菜单实现
qq_42758330的博客
05-01 5664
DIV+CSS实现二级菜单 在网页制作中我们经常会用到的这样的导航栏+二级菜单布局 实现效果如下： 设计思路就是通过 ul li 的双重嵌套来实现二级菜单，l利用display:none将二级菜单默认隐藏，li:hover鼠标悬浮时再将其显示出来。 需要注意的是： 1.需要清除掉网页的原始属性 以防止二级菜单错位*{margin:0;padding:0;} 2.在一级菜单中使用display: block; float:left 使其横向显示 3.使用绝对对位 然后使二级菜单默认隐藏position:a
纯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...
CSS技巧分享：如何用css制作横排二级下拉菜单
u012702553的博客
06-28 3119
导航菜单是每个网站所必备的功能，也是每个学习制作网站的朋友所必须接触的，如何用css样式制作一个简单漂亮的二级下拉菜单呢，下来小编就一步一步教大家来制作横排二级下拉菜单，让我共同来学习吧。
div + css 鼠标 hover 下拉菜单
qq_38990668的博客
06-12 150
div + css 鼠标 hover 下拉菜单 源码： <!DOCTYPE html> <html lang="en"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <head&gt...
html中二级菜单老是自动消失,纯css悬浮一级再悬浮二级菜单，二级菜单不消失...
weixin_36243867的博客
05-31 829
总结：悬浮一级菜单用absolute定位，二级用relative.menuDiv ul,.menuDiv li {list-style: none;margin: 0px;padding: 0px;float: left;}.menuDiv>ul>li>ul {display: none;}.menuDiv>ul>li>ul>li {float: none...
Vue 给el-table的某一行添加样式
shunzizhan
06-05 1万+
背景 最近在遇到一个需求：一个列表，每一条数据都有一个status状态，只有status是完成，才能点击展开expand,否则不能出现expand 详见示例：https://codepen.io/shunzizhan/pen/YbMOwK 代码实现 可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。 设...
纯CSS实现二级导航菜单效果
CodingNoob
08-10 2368
在项目开发过程中，二级导航菜单效果出现的频率是非常高的，但是一般情况下，很多人第一印象就是使用js，其实CSS也可以实现的，（PS ：一般能使用CSS解决的不要使用js，能用原生js的尽量不用jq（个人观点）。）效果如下： 代码如下： demo
div css 二级菜单
霖霂晗的专栏
12-27 661
二级菜单 $(document).ready(function() { $("ul li").hover(function(){ $(this).find("li").css("display","block"); },function(){ $(this).find("li").css("display","none"); }) }); *{ margin:0px;
css二级导航栏下拉菜单
最新发布
06-09
好的，你可以按照以下步骤实现CSS二级导航栏下拉菜单： 1. 在HTML文件中，用列表实现导航栏，子列表实现下拉菜单，如下所示： ```html <li><a href="#">首页</a></li> 产品 <li><a href="#">产品1</a></li...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值